Question

I often find myself in a place where even a simple jQuery code like below –

jQuery(document).ready(function () {
    jQuery("input[type='text']").click(function () {
        this.select();
    });
});

Does not work when placed inside “head” tag, but moving this snippet just before the end of body tag in master page works fine. Is there any basic JavaScript/jQuery principle which I am missing.

Answer 1

There could be multiple reasons, just some of which are:

• You are loading the jquery.js file after this block of code – Solution is to move your code below the link to the file
• Although .ready() almost guarantees that the code within it will fire only after the document has completed loading, there is still the possibility that the text element you are trying to select may not be ready/loaded yet – Solution here is to use the .on() method: jQuery("input[type='text']").on('click', function () {...}));