3

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”的事件处理程序。也许我误解了“on”应该如何工作？

4

5 回答 5

3

试试这个...

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

第一个选择器必须是事件将冒泡到的公共祖先元素。

于 2012-10-10T02:39:54.650 回答
3

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

$('#div2').on('click', '#div3', function(e) {
     alert('OLA!'); 
});
于 2012-10-10T02:40:32.903 回答
2

你需要以这种方式给予：

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

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

于 2012-10-10T02:41:25.747 回答
2

那么不同的东西:) 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!');
    });
    }
});​
于 2012-10-10T02:41:48.627 回答
1

试试这个

$('#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!');
    });
});​

检查演示

于 2012-10-10T02:40:35.337 回答