Question

我想为稍后在DOM中创建的元素添加一个事件句柄。

基本上，我要做的是，当我点击p#one时，会创建新元素p#two，然后点击p#two，告诉我“p＃two”点击。但是，它不起作用，点击console.log后，我没有得到'p＃two clicked'的p#two结果。

我使用on()将点击事件添加到p#two。我做错了什么？

感谢。

以下是我的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>on() test</title>
  <link type="text/css" href="http://localhost/jquery-ui-1.8.20.custom/css/smoothness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
  <script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {

        $('p#two').on('click', function() {
            console.log('p#two clicked');
        });


        $('p#one').click(function() {
            console.log('p#one clicked');
            $('<p id="two">two</p>').insertAfter('p#one');
        });

    }); // end doc ready
  </script>
</head>

<body>
    <p id="one">one</p>
</body>
</html>

Answer 1

$('body').on('click','p#two', function() {
    console.log('p#two clicked');
});

您也可以使用

$(document).on('click', 'p#two', function() {

});

详细了解 .on()

您也可以使用 .delegate()

$('body').delegate('#two', 'click', function() {

});

Answer 2

你可以将$ .on绑定到一个永远存在于dom中的父元素。

$(document).on('click','p#two', function() {
            console.log('p#two clicked');
        });

请注意：您可以将document替换为dom中始终存在的元素的任何父级，并且父级越接近越好。

查看$.on

的文档

直播已折旧。请改用$ .on。 $ .on的等价语法为$ .live和$ .delegate

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

我建议您使用$.on进行所有事件处理，因为所有其他方法都是通过$ .on方法引导的。

从jQuery source v.1.7.2

检查这些函数的定义

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    // ( namespace ) or ( selector, types [, fn] )
    return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
}

您可以看到所有方法都在使用$.on和$.off。因此，使用$.on，您至少可以保存一个函数调用，但大多数情况下并不是那么重要。

Answer 3

您想使用Jquery.on

$('body').on('click','p#two', function() {
        console.log('p#two clicked');
    });

使用on（）将事件处理程序添加到尚不存在的元素中？

3 个答案: