I use the following jquery in my page.

var j = jQuery.noConflict();
j(document).ready(function(){
    console.log(j("#label_19"));
    j("#label_19").on("click",function(){
        alert("Clicked");
    });
});

When document loads, the element (it's a checkbox) appears in the console. But when I click the checkbox, the alert is not thrown. But when I copy the same code (as below)

    j("#label_19").on("click",function(){
        alert("Clicked");
    });

in console panel and press run. Now when I click the checkbox, the alert is thrown. What could be the issue in this case?

Updated:

What I observe in console is:

Object[input#label_19.document_label attribute value = "Check-In"]

The HTML markup is

<input id="label_19" class="document_label" type="checkbox" value="Check-In" name="label[19]">

I use the following jquery in my page.

var j = jQuery.noConflict();
j(document).ready(function(){
    console.log(j("#label_19"));
    j("#label_19").on("click",function(){
        alert("Clicked");
    });
});

When document loads, the element (it's a checkbox) appears in the console. But when I click the checkbox, the alert is not thrown. But when I copy the same code (as below)

    j("#label_19").on("click",function(){
        alert("Clicked");
    });

in console panel and press run. Now when I click the checkbox, the alert is thrown. What could be the issue in this case?

Updated:

What I observe in console is:

Object[input#label_19.document_label attribute value = "Check-In"]

The HTML markup is

<input id="label_19" class="document_label" type="checkbox" value="Check-In" name="label[19]">

• javascript
• jquery

• 1 @Qantas94Heavy: If he weren't, he wouldn't be seeing the console.log statement running at all. 'tis an odd one, this, but more context will probably make it clear. – T.J. Crowder Commented Dec 10, 2013 at 12:29
• 1 @T.J.Crowder i know just wanted to know that if he is doing in the end he actually need not to use ready – Rohit Agrawal Commented Dec 10, 2013 at 12:29
• 1 jsfiddle/kTKyC works for me -- is there anything different with your code? – Qantas 94 Heavy Commented Dec 10, 2013 at 12:31
• 2 Regarding your edit, the id in the markup doesn't match the id in your JS, so I don't see how your code could work in the console or in a script on the page. – nnnnnn Commented Dec 10, 2013 at 12:34
• 2 Based on the info provided (and a corrected mismatch in the id), the following fiddle works: jsfiddle/494wm The question is, how does your scenario differ from the test case..? It might be worthwhile stripping down your code to just this and adding things back until it breaks. – Rob Baillie Commented Dec 10, 2013 at 12:36

3 Answers 3

The only explanation that fits the facts you've presented is that there is code running after your ready callback but before you click the element that replaces the element in question. Some kind of ajax callback or similar.

You'll need to look through your code to find the place where that's happening. Things to look for are any html calls on elements that contain the #label_19 element, or (if there's a mix of jQuery and non-jQuery code) assignments to innerHTML.

You can use event delegation to solve this, which may or may not be the best answer depending on what your code is doing. That looks like this:

var j = jQuery.noConflict();
j(document).ready(function(){
    console.log(j("#label_19"));
    j(document).on("click", "#label_19", function(){ // This is the changed line
        alert("Clicked");
    });
});

There, instead of hooking click on the actual element, we're hooking it on document but then asking jQuery to only tell us about clicks that pass through elements matching the selector we give it as they bubble. That way, the fact that something is destroying and recreating the #label_19 element doesn't matter, because we're not hooking a handler on that element. We're hooking the handler on document and checking, when the event occurs, if it passed through something that matches that selector.

But I wouldn't just blindly use event delegation, I'd find out what's really happening with that element.

Without seeing the rest of your code—including HTML and related DOM elements—have you considered using j(window).load() instead of j(document).ready()

var j = jQuery.noConflict();
j(window).load(function(){
    console.log(j("#label_19"));
    j("#label_19").on("click",function(){
        alert("Clicked");
    });
});

As explained here:

The window load event executes a bit later when the plete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.

I had a similar issue, it got resolved after i wrapped it in a window.load

(function ($) {
    $(window).on('load', function () {
        //MY click calls inside here
    });    
})(jQuery);

Hope it helps!