2013-02-15 118 views
2

在我构建的JQM(1.3.0)应用程序中,我使用“on”将所有提交按钮绑定到click事件,现在和将来的所有提交按钮都会绑定此事件。我在$(document).ready()中执行这些绑定,因为我认为它只需要被调用一次...以前。.on()绑定在触发器('创建')后无法工作

我使用一些内容更新JQM panel,并在该内容上调用.trigger('create')。 应该发生的是新创建的提交按钮应单击时触发绑定点击事件,但它不会。

这里是一个fiddle展示我想要实现的。在演示中,每当你点击一个提交按钮时,消息框应该显示“Clicked”...不幸的是,它只发生在第一个元素上。

$(function(){ 
    $('input[type="submit"]').on('click', function(e){ 
     $('#msg').append('<div>Clicked</div>'); 
     $('#panel').html('<input type="submit" value="New Button">').trigger('create'); 
    }); 
}); 

我在使用.on()不正确吗?我想我可以将所有的绑定放入一个函数中,然后每当调用.trigger('create')时调用该函数......但这似乎效率低下。

+0

这不是。对如何运作 – Jack 2013-02-15 01:25:38

+0

你通常会(通过选择常见)绑定到一个家长,在这种情况下,也许一个' form.class'。 ''.live'绑定到'document'我相信,*效率低下。但问题不在于监视点击和委托,如果某些*选择器指定*元素冒泡(或捕获?)。 – 2013-02-15 01:27:54

+0

我认为:(,文档说,取代现场直播,但我将如何绑定“为未来”? – 2013-02-15 01:28:43

回答

2

等价的方式有绑定使用.on方法事件的两种方式。一个是使用事件委托,它将事件绑定到一个更高级的级别元素(一直到document,如果有必要,但更接近越好),然后当事件冒泡时它会监听它,如果它匹配它触发的传入选择器。使用.on的第二种方法是直接将其绑定到元素而不使用委派。

您正在使用.on第二版的方式,但您想要的是使用第一个(委派版本)。

例如,代替目​​前的代码,你会做类似下面

$(function(){ 
    $('#someParentElement').on('click','input[type="submit"]', function(e){ 
     $('#msg').append('<div>Clicked</div>'); 
     $('#panel').html('<input type="submit" value="New Button">').trigger('create'); 
    }); 
}); 
+0

中指定了一个容器这就是我的意思*低* – Jack 2013-02-15 01:31:59

+0

@JaredFarrish好吧我同意,我相应地编辑它 – Jack 2013-02-15 01:33:29

+0

@JaredFarrish我最初使用“lower”与“higher”形成对比 – Jack 2013-02-15 01:35:53

3

你需要

$('#someParentElement').on('click', 'input[type="submit"]', function(e){ 
    //handler 
}); 

你有它的老

$('input[type="submit"]').bind('click', function(e){ 
    //handler 
}); 
+2

我不会*使用'document'。 * is * inefficient。 – 2013-02-15 01:28:22

+0

oops - 我没有注意到在问题 – wheresrhys 2013-02-15 09:42:05