$ (document) .on ("click" ... doesn't work?

Question

Is there a known mistake I can make here?

I have a script that uses .on () because the element is dynamically generated and it is not working. To test this, I replaced the selector with dynamic element wrap, which is static, and it still doesn't work! When I switched to a plain old .click for wrapper, it worked. (This just doesn't work for a dynamic element, obviously the one that matters.)

It works:

$("#test-element").click(function() { alert("click"); }); 

Is not:

 $(document).on("click","#test-element",function() { alert("click"); }); 

UPDATE:

I right-clicked and did an “Inspect Element” in Chrome to just double-check something, and then the event clicked. I updated and did not work, checked the element, and then it worked. What does it mean?

Answer 1

You use the correct syntax to bind to the document to listen for the click event for the element with id = "test-element".

It probably does not work due to one of:

• Do not use latest jQuery version
• Do not certify your code inside the finished DOM document
• or you are doing something that causes the event to not bubble up to the listener in the document.

To capture events on members that are AFTER the event listeners declare you must bind to the parent member or the member above in the hierarchy.

For example:

 $(document).ready(function() { // This WILL work because we are listening on the 'document', // for a click on an element with an ID of #test-element $(document).on("click","#test-element",function() { alert("click bound to document listening for #test-element"); }); // This will NOT work because there is no '#test-element' ... yet $("#test-element").on("click",function() { alert("click bound directly to #test-element"); }); // Create the dynamic element '#test-element' $('body').append('<div id="test-element">Click mee</div>'); }); 

In this example, only the “document linked” warning will be triggered.

JSFiddle with jQuery 1.9.1

Answer 2

Your code should work, but I know the answer will not help you. You can see a working example here (jsfiddle) .

Jquery:

 $(document).on('click','#test-element',function(){ alert("You clicked the element with and ID of 'test-element'"); }); 

As already stated, you are using an identifier instead of a class. If you have another element on the page with the identifier, then jquery will return only the first element with this identifier. There will be no errors, because it works. If this is a problem, you will notice that the click event works for the first test-element , but not for subsequent ones.

If this does not accurately describe the symptoms of the problem, your selector may be wrong. Your update makes me believe that this is due to checking the element, and then again clicking the page and starting the click. What could be the reason for this if you put an event listener in the actual document instead of test-element . If so, when you click on the document and vice versa (for example, from the developer's window back to the document), the event will be fired. If so, you will also notice that the click event is fired if you click between two different tabs (because they are two different document and, therefore, you click the document.

If none of these is the answer, publishing HTML will go a long way in figuring this out.

Answer 3

Old post, but I like to share, since I have the same case, but I finally knew the problem:

The problem is this: we are creating a function to work with the specified HTML element, but the HTML element associated with this function has not yet been created (since the element was dynamically generated). For this to work, we must create the function at the same time that we create the element. An element first than to associate a function with it.

Just a word, a function will only work with the element created in front of it. Any elements created dynamically mean after it.

But please check this sample, which did not take into account the above case:

 <div class="btn-list" id="selected-country"></div> 

Dynamically added:

 <button class="btn-map" data-country="'+country+'">'+ country+' </button> 

This function works well by pressing a button:

 $(document).ready(function() { $('#selected-country').on('click','.btn-map', function(){ var datacountry = $(this).data('country'); console.log(datacountry); }); }) 

or you can use the body:

 $('body').on('click','.btn-map', function(){ var datacountry = $(this).data('country'); console.log(datacountry); }); 

compare with this what doesn't work:

 $(document).ready(function() { $('.btn-map').on("click", function() { var datacountry = $(this).data('country'); alert(datacountry); }); }); 

hope this helps

Answer 4

Try the following:

 $("#test-element").on("click" ,function() { alert("click"); }); 

The documenting way to do this is also weird. That would make sense to me if it were used for a class selector, but in the case of an identifier, you probably just have a useless DOM going through there. In the case of the id selector, you instantly get this element.

Answer 5

It works:

 <div id="start-element">Click Me</div> $(document).on("click","#test-element",function() { alert("click"); }); $(document).on("click","#start-element",function() { $(this).attr("id", "test-element"); }); 

Here is the fiddle