Fatal编程技术网
  • javascript/
  • Javascript 使用on（）将事件处理程序添加到尚不存在的元素？

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

javascript jquery

Javascript 使用on（）将事件处理程序添加到尚不存在的元素？,javascript,jquery,Javascript,Jquery,我想向稍后将在DOM中创建的元素添加事件句柄 基本上，我想做的是，当我点击p#one时，将创建新元素p#two，然后我点击p#two，告诉我点击了“p#two”。但是，它不起作用，在我单击p#two之后，我没有得到“p#two clicked”的console.log结果 我使用on（）将单击事件添加到p#two。我做错了什么 谢谢 下面是我的示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf

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

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

我使用
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>


on（）测试
$（文档）.ready（函数（）{
$（'p#two'）。在（'click'，function（）上{
console.log（'p#two clicked'）；
});
$（'p#one'）。单击（函数（）{
console.log（'p#one clicked'）；
$（'p id=“two”>two
'）。后面插入（'p#one'）；
});
}); // 结束文件准备就绪
一个
您想使用Jquery.on吗

$('body').on('click','p#two', function() {
        console.log('p#two clicked');
    });
你也可以使用

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

});
阅读更多关于

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

});
您也可以使用

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

});
可以将$.on绑定到dom中始终存在的父元素，如下所示

$(document).on('click','p#two', function() {
            console.log('p#two clicked');
        });
注意：您可以用dom中始终存在的元素的任何父元素替换
文档
，父元素越近越好

核对

生活被贬低了。改为在上使用$。$.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
至少可以保存一个函数调用，尽管这在大多数情况下并不重要。

live（）
在jQuery 1.7
中被弃用，并被替换为
on（）
。live（）
在jQuery 1.7中被弃用，取而代之的是
.on（）