Question

jQuery'on'函数应该捕获将来创建的元素的事件，但是在我的代码中，除非已经创建了项目，否则它似乎不起作用。这是失败的代码：

<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#div1').on('click', function(e) { 
        $('#div2').html('<div id="div3">Now Click Me!</div>'); 
    });
    $('#div3').on('click', function(e) { alert('OLA!'); });
});
</script>
</head>
<body>
<div id='div1' style='border:black 1px solid; background:yellow'>CLICK ME</div>
<div id='div2' />
</body>
</html>

单击“div2”会创建“div3”，但点击“div3”则不会执行任何操作。另一方面，如果我将javascript代码更改为如下所示：

$(function () {
    $('#div1').on('click', function(e) { 
          $('#div2').html('<div id="div3">Now Click Me!</div>'); 
          $('#div3').on('click', function(e) { alert('OLA!'); });
    });
});

它可以工作，但它的工作原理是因为在添加div3元素之后没有声明'div3'的事件处理程序。也许我误解了“开启”应该如何运作？

Answer 1

试试这个......

$('body').on('click', '#div3', function(e) { alert('OLA!'); });

第一个选择器需要是事件将发送到的共同祖先元素。

Answer 2

您应该从元素或文档对象的静态父项之一委派事件：

$('#div2').on('click', '#div3', function(e) {
     alert('OLA!'); 
});

Answer 3

你需要这样说：

$('#div2').on('click','#div3', function(event) {
  alert('OLA!');
});

小提琴：http://jsfiddle.net/BRWVq/

Answer 4

不同的:) http://jsfiddle.net/VYgpM/1/

希望它适合原因:)

<强>码

$(function() {
    $('#div1').on('click', function(e) {
        $('#div2').html('<div id="div3">Now Click Me!</div>');
        init_div3();
    });

    function init_div3(){
        $('#div3').on('click', function(e) {
        alert('OLA!');
    });
    }
});

Answer 5

试试这个

$('#div2').on('click','#div3', function(e) { 
    alert('OLA!'); 
});

您需要委托事件，因为您正在动态创建元素。

您的代码将如下所示

$(function() {
    $('#div1').on('click', function(e) {
        $('#div2').html('<div id="div3">Now Click Me!</div>');

    });

    $('#div2').on('click', '#div3', function(e) {
        alert('OLA!');
    });
});

<强> CHECK DEMO

JQuery“on”不是捕捉事件

5 个答案:

小提琴：http://jsfiddle.net/BRWVq/