21

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

基本上，我想做的是，当我单击时，将创建p#one新元素，然后单击，告诉我单击“p#two”。但是，它不起作用，我单击后没有得到“p#two clicked”的结果。p#twop#twoconsole.logp#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>
4

3 回答 3

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

你也可以使用

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

});

阅读更多关于.on()

你也可以使用.delegate()

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

});
于 2012-05-30T17:07:18.743 回答
13

您可以像这样将 $.on 绑定到将始终存在于 dom 中的父元素。

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

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

检查$.on的文档

活是贬值的。改用 $.on 。$.live 和 $.delegate 的 $.on 等效语法

$(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 源代码 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您至少可以保存一个函数调用，尽管在大多数情况下这并不重要。

于 2012-05-30T17:07:22.463 回答
-1

你想使用 Jquery.on

$('body').on('click','p#two', function() {
        console.log('p#two clicked');
    });
于 2012-05-30T17:06:23.160 回答