我正在使用jQuery v.1.7.1,其中.live()方法显然已被弃用.
我遇到的问题是,当使用以下方法动态将html加载到元素中时:
$('#parent').load("http://...");
如果我之后尝试添加click事件,则不会使用以下任一方法注册事件:
$('#parent').click(function() ...);
要么
// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...);
实现此功能的正确方法是什么？它似乎只适用于.live(),但我不应该使用该方法.请注意,#child是动态加载的元素.
谢谢.
由于live()方法从版本1.7开始不推荐使用,因此我开始浏览我的源代码并将所有实时事件处理程序转换为on().我的印象是,改变很简单,一切都会像以前一样有效; 但是,我遇到了一些行为不正常的代码.
我有以下jQuery选择绑定表标记的click事件...
$('table.accordion-header').live("click", function ($e) {
// gobs of code
}
...它工作得很好(即 - 即使在页面上发生异步回发后,我的表标记点击事件也会引发).但是,如果我将代码更改为以下内容
$('table.accordion-header').on("click", function ($e) {
// gobs of code
}
然后,在页面上发生任何异步回发后,不再引发click事件.请注意 - click事件确实可以处理任何异步回发,但之后它不再有效.那我在这里错过了什么？
我总是在这种情况下对动态创建的元素.on()起作用.live()(例如我使用$('.foo').on('click', function(){alert('click')});然后foo由于某些AJAX而创建了类的元素,现在我期望点击该元素以引发警报) .在实践中,这些不是我得到的结果.我可能犯了一个错误,但是有人可以帮我理解实现这些结果的新方法.on()吗？
提前致谢.
到目前为止,该网站上的大多数人可能都知道:
$("#someTable TD.foo").click(function(){
$(e.target).doSomething();
});
将会比以下情况更糟糕:
$("#someTable").click(function(){
if (!$(e.target).is("TD.foo")) return;
$(e.target).doSomething();
});
现在有多糟糕将取决于你的桌子有多少TD,但只要你有至少几个TD,这个一般原则应该适用.(注意:当然,聪明的事情是使用jQuery委托而不是上面的代码,但我只是试图用明显的区别来做一个例子).
无论如何,我向同事解释了这个原则,他们的回答是"嗯,对于站点范围的组件(例如,日期选择INPUT),为什么停在那里？为什么不将每种类型的组件的一个处理程序绑定到身体本身？" 我没有一个好的答案.
显然使用委托策略意味着重新思考如何阻止事件,这是一个缺点.此外,假设你有一个页面,你有一个"TD.foo",不应该有一个事件连接到它.但是,如果您理解并愿意解决事件冒泡变化,并且如果您执行"如果您将.foo放在TD上,它始终会将事件连接起来"的策略,那么这些似乎都不是很重要.
我觉得我必须遗漏一些东西,所以我的问题是:将所有站点范围的组件的所有事件委托给BODY还有其他任何缺点(而不是直接将它们绑定到所涉及的HTML元素,或委托它们)到非BODY父元素)？
我想用一个jQuery专家来解释为什么$(文档)标识符被其他人推荐用于jQuery的on()语句而不仅仅是使用元素本身
示例1:为什么在这里使用$(document)比Example#2更好？
$(document).on("click", ".areaCodeList a", function(){
// do stuff
});
示例2:与示例1相比,为什么使用这种方式考虑不好的做法？
$(".areaCodeList a").on("click", function(){
// do stuff
});
jQuery有一个所谓的新方法on()被建议更换delegate(),live()和.bind().
例如,使用两种方法:
$('#some-button').on('click', function() {
//do something when #some-button is clicked
});
$('#some-button').live('click', function() {
//do something when #some-button is clicked
});
哪一个表现更好？(我知道这两个事件上下文都在文档级别.)