0

I have this template:

CODE PHTML:

<div>
    Content  // this line is OK
</div>


<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert("test"); // this line is OK
            $('input').focus(function(){
                console.log("test");  // this line is NOT OK
            });
        });
    });
</script>

I can't execute the line of code for inputs I do not receive any error but I do not working.

I tried with setTimeout() but it still doesn't work.

If you run the line in the console in Chrome then everything is fine.

Do you have any idea how I can solve this problem?

Thanks in advance!

0

Does it work if you replace this:

$('input').focus(function(){
    console.log("test");  // this line is NOT OK
});

With this?

$('body').on('focus', 'input', function() {
    console.log("test");
})

If so change body to a parent element that is not rendered dynamically.

This uses event delegation so if the input element is rendered dynamically via JS it will still work, this may or may not be the issue here it's hard to tell without seeing the full code and page. You can read more about event delegation here

0

You could also try to require the domready like this:

<script type="text/javascript">
require(['jquery', 'domReady!'],function($){
    $(window).load(function() {
        alert("test"); // this line is OK
        $('input').focus(function(){
            console.log("test");  // this line is NOT OK
        });
    });
});

  • It doesn't make sense having window load AND domReady!, I would get rid of window load and keep domReady! as we only care about the DOM elements being loaded. But if on window load doesn't work I doubt domReady! will make a difference. – Ben Crook Sep 18 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.