$（document）.on（“click”... ...不工作？ [英] $(document).on("click"... not working?

问题描述

有没有一个众所周知的错误，我可以在这里？我有一个使用.on（）的脚本，因为一个元素是动态生成的，它不工作。为了测试它，我用动态元素的wrap替换了选择器，它是静态的，它仍然不工作！当我切换到普通的旧。单击包装它工作，虽然。 （

这个工作：

  $（＃test-element）click（function（）{
 alert（click）; 
} ）; 
  

这不：：

  $（document）.on（click，＃test-element，function（）{
 alert（click）; 
}）; 
   
 更新： b 
 $ b 
右键单击并在Chrome中检查元素，只需仔细检查一下，然后点击事件工作。我刷新，它没有工作，检查元素，然后它的工作。这是什么意思？
解决方案
您正在使用正确的语法绑定到文档以侦听元素的点击事件id =test-element。
 
 
 
由于以下原因之一可能无法正常工作：
 
 
 
 
 
不使用最新版本的jQuery 
 
 
不会将代码封装在DOM内部
 
 
 
 
 
 
 
 
捕获 之后创建的元素上的事件声明您的事件监听器 - 您应该绑定到父元素或层次结构中较高的元素。
 
 
 
例如：
  $（document）.ready（function（）{
 //这将会工作，因为我们正在侦听'document'，
 //单击一个ID为＃test-element 
 $（document）.on（click，＃test-element，function（）{
 alert for＃test-element）; 
}）; 
 
 //这不会工作，因为没有'＃test-element'... 
 $（＃test-element）。on（click ）{
 alert（click directly directly directly to＃test-element）; 
}）; 
 
 //创建动态元素'＃test-element'
 $（'body'）。append（'< div id =test-element> Click mee< div>'）; 
}）; 
  
在此示例中，只有绑定到文档警报将会触发。
 
 
 
  JSFiddle with jQuery 1.9.1  
 
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?
解决方案
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

                        
这篇关于$（document）.on（“click”... ...不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！