我使用的是jQuery v.1.7.1,其中.live()方法显然已弃用。
我遇到的问题是,当动态加载html到一个元素使用:
$('#parent').load("http://...");
如果我尝试添加一个点击事件之后,它不会注册事件使用这些方法:
$('#parent').click(function() ...);
or
// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...);
实现这个功能的正确方法是什么?它似乎只与.live()为我工作,但我不应该使用该方法。注意,#child是一个动态加载的元素。
谢谢。
美元(文档)。('点击','。Selector ', function() {/* do stuff */});
编辑:我提供了更多关于这是如何工作的信息,因为……单词。
在这个示例中,您将在整个文档上放置一个侦听器。
当您单击任何匹配.selector的元素时,事件会冒泡到主文档中——只要没有其他侦听器调用event. stoppropagation()方法——这将使事件冒泡到父元素。
不是绑定到特定的元素或元素集,而是侦听来自匹配指定选择器的元素的任何事件。这意味着您可以一次创建一个侦听器,它将自动匹配当前存在的元素以及任何动态添加的元素。
这是明智的,原因有几个,包括性能和内存利用率(在大型应用程序中)
编辑:
显然,您可以监听的最接近的父元素更好,并且您可以使用任何元素来代替document,只要您想要监视事件的子元素位于该父元素中……但这真的和问题没有任何关系。
试试这个:
$('#parent').on('click', '#child', function() {
// Code
});
在$.on()文档中:
事件处理程序仅绑定到当前选定的元素;他们
在代码调用.on()时,必须存在于该页上。
当你调用$.on()时,你的#子元素不存在,所以事件没有被绑定(不像$.live())。但是,#parent确实存在,所以将事件绑定到它是可以的。
我上面代码中的第二个参数充当了一个“过滤器”,仅当事件从#child冒泡到#parent时才触发。
如果你想让点击处理程序为一个动态加载的元素工作,那么你在一个父对象上设置事件处理程序(不动态加载),并给它一个匹配你的动态对象的选择器,如下所示:
$('#parent').on("click", "#child", function() {});
事件处理程序将被附加到#parent对象上,任何时候一个起源于#child的点击事件都会触发你的点击处理程序。这称为委托事件处理(事件处理委托给父对象)。
这样做是因为即使#child对象还不存在,你也可以将事件附加到#parent对象上,但当它之后存在并被单击时,click事件将弹出到#parent对象,它将看到它起源于#child,并且有一个事件处理程序用于单击#child并触发你的事件。
我在我的项目中使用了“live”,但我的一个朋友建议我应该使用“on”而不是live。
当我试着用它的时候,我遇到了和你一样的问题。
在我的页面上,我动态创建按钮表行和许多dom东西。但当我用上魔法就消失了。
其他的解决方案就像孩子一样每次点击都调用你的函数。
但我找到了一个方法让它再次发生,这就是解决方案。
编写如下代码:
function caller(){
$('.ObjectYouWntToCall').on("click", function() {...magic...});
}
调用调用者();在像这样在页面中创建对象之后。
$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();
通过这种方式,你的函数被调用时,它应该不是每次点击页面。
我知道现在回答有点晚,但我已经为.live()方法创建了一个填充。我已经在jQuery 1.11中对它进行了测试,它似乎工作得很好。我知道我们应该在任何可能的情况下实现.on()方法,但在大型项目中,由于任何原因都不可能将所有.live()调用转换为等效的.on()调用,以下方法可能有效:
if(jQuery && !jQuery.fn.live) {
jQuery.fn.live = function(evt, func) {
$('body').on(evt, this.selector, func);
}
}
只需在加载jQuery之后和调用live()之前包含它。