Question

使用 on()? 向尚不存在的元素添加事件处理程序

2012-05-30

11402

javascript jquery

我想将事件句柄添加到一个元素中，该元素将在dom。

基本上创建的元素，我想做的是，当我单击 p＃一个，新元素 P＃将创建，然后我单击 p＃二，告诉我“ p＃二”单击。但是，它行不通，我没有得到 console.log “ p＃二”单击'之后的结果<代码> p＃p＃p＃二 。

i使用 on（） 将单击事件添加到 p＃p＃二 。我怎么做什么？

谢谢。

下面是我的示例代码：

441418966

Answer 1

810388114

您还可以使用

532914835

阅读更多有关 .on（）

您也可以使用 .delegate（）

646430214

Answer 2

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

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

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

检查 $.on 的文档>

Live 已弃用。请改用 $.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 源代码 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');
    });

Jason Kulatunga

2012-05-30