document on click not working

Question

Is there a well-known mistake I could be making here     I ve got a script that s using  on   because an element is dynamically generated  and it isn t working   Just to test it out  I replaced the selector with the dynamic element s wrap  which is static  and it still didn t work   When I switched to plain old  click for the wrap it worked  though   This just won t work for the dynamic element obviously  the one that matters    This works       test-element   click function         alert  click          This doesn t     document  on  click    test-element  function         alert  click          UPDATE   I right-clicked and did  Inspect Element  in Chrome to just double-check something  and then after that the click event worked   I refreshed and it didn t work  inspected element  and then it worked   What does this mean

User · Accepted Answer

You are using the correct syntax for binding to the document to listen for a click event for an element with id="test-element".

It's probably not working due to one of:

Not using recent version of jQuery
Not wrapping your code inside of DOM ready
or you are doing something which causes the event not to bubble up to the listener on the document.

To capture events on elements which are created AFTER declaring your event listeners - you should bind to a parent element, or element higher 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 "bound to document" alert will fire.

JSFiddle with jQuery 1.9.1

User · Answer

Your code should work  but I m aware that answer doesn t 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 someone already pointed out  you are using an ID instead of a class  If you have more that one element on the page with an ID  then jquery will return only the first element with that ID  There won t be any errors because that s how it works  If this is the problem  then you ll notice that the click event works for the first test-element but not for any that follow   If this does not accurately describe the symptoms of the problem  then perhaps your selector is wrong  Your update leads me to believe this is the case because of inspecting an element then clicking the page again and triggering the click  What could be causing this is if you put the event listener on the actual document instead of test-element  If so  when you click off the document and back on  like from the developer window back to the document  the event will trigger  If this is the case  you ll also notice the click event is triggered if you click between two different tabs  because they are two different documents and therefore you are clicking the document   If neither of these are the answer  posting HTML will go a long way toward figuring it out

User · Answer

This works    lt div id  start-element  gt Click Me lt  div gt     document  on  click    test-element  function         alert  click           document  on  click    start-element  function           this  attr  id    test-element          Here is the Fiddle

User · Answer

if this code does not work even under document ready  most probable you assigned a return false  somewhere in your js file to that button  if it is button try to change it to a  span  anchor or div and test if it is working    document  on  quot click quot   quot  test-element quot  function             alert  quot click bound to document listening for  test-element quot

User · Answer

Try this       test-element   on  click   function         alert  click          The document way of doing it is weird too  That would make sense to me if used for a class selector  but in the case of an id you probably just have useless DOM traversing there  In the case of the id selector  you get that element instantly

User · Answer

An old post  but I love to share as I have the same case but I finally knew the problem    Problem is   We make a function to work with specified an HTML element  but the HTML element related to this function is not yet created  because the element was dynamically generated   To make it works  we should make the function at the same time we create the element  Element first than make function related to it   Simply word  a function will only works to the element that created before it  him   Any elements that created dynamically means after him    But please inspect this sample that did not heed the above case     lt div class  btn-list  id  selected-country  gt  lt  div gt    Dynamically appended     lt button class  btn-map  data-country    country    gt    country    lt  button gt    This function is working good by clicking the button      document  ready function                     selected-country   on  click    btn-map   function             var datacountry     this  data  country    console log datacountry                or you can use body like       body   on  click    btn-map   function                 var datacountry     this  data  country    console log datacountry                 compare to this that not working      document  ready function              btn-map   on  click   function              var datacountry     this  data  country    alert datacountry                 hope it will help

[jquery] $(document).on("click"... not working?

Examples related to jquery

Examples related to click