新添加的对象不会响应页面加载中的jQuery事件 [英] Newly appended objects don't respond to jQuery events from page load
问题描述
我在这里使用Backbone，但是我在非Backbone网站上也遇到了这个问题.
I am using Backbone here, but I've also experienced this issue with non-Backbone sites as well.
本质上，我的问题是我在一个javascript文件base.js中定义了许多全局" jquery函数.然后，我加载新元素，然后使用Backbone，AJAX或任何您喜欢的异步调用将它们附加到页面上.这很好用，除了新对象似乎没有链接到我在pageload上声明的jQuery事件. (对不起，这里的外行语言-我经常是措辞恰当的新手)
Essentially, my issue is that I define in one javascript file, base.js, a number of 'global' jquery functions. Then, I load new elements and append them to the page using Backbone, AJAX, or whichever asynchronous call you like. This works great, except the new objects don't seem to be linked to the jQuery events I declared on pageload. (Sorry for the layman language here - often I am a newbie at proper wording)
例如，假设我在加载到pageload的js文件中声明:
For example, let's say I declare in a js file loaded on pageload:
$('.element').hover(function(){alert('hi world')});
但是随后我在页面加载之后添加了一个新元素，然后该悬停将无法正常工作.
But then I append a new element after pageload, then this hover won't work.
任何人都可以解释:
- 这是为什么?
- 我是否可以强制使用新的附加元素来处理/监听已声明的当前事件?
我怀疑(2)可能是不可能的(我必须在追加之后重写事件)，但是我很想知道是否有某种解决方案.
I suspect (2) may not be possible (that I have to rewrite the events after appending), but am interested to know if there is some sort of solution.
推荐答案
为什么会这样?
Why this is?
因为执行事件绑定代码时，DOM中不存在的元素将不会受到影响(它们可能是吗?它们还不存在！)常规"事件绑定方法(例如.change())会将事件处理函数的副本附加到匹配集中的每个元素.
Because when the event binding code is executed, elements that do not exist in the DOM already will not be affected (how could they be? They don't exist yet!) The "normal" event binding methods (e.g. .click() or .change()) will attach a copy of the event handler function to every element in the matched set.
我可以强制使用新的附加元素来处理/监听已经声明的当前事件吗?
I can force a new appended element to work with/listen to current events already declared?
您确实可以通过委派 DOM树上方的事件处理程序来实现.由于大多数DOM事件都会从其起源的元素冒出来，因此效果很好.使用jQuery，您可以使用 .on() (jQuery 1.7+-对于较旧的版本，请使用 .delegate() 代替)方法来做到这一点:
You can indeed, by delegating the event handler higher up the DOM tree. Since most DOM events bubble up the tree from the element on which they originate, this works well. With jQuery, you can use the .on() (jQuery 1.7+ - for older versions use .delegate() instead) method to do this:
$("#someCommonAncestor").on("someEvent", ".element", function () {
// Do stuff
});
在代码运行时，调用.on()的元素必须存在于DOM中.当事件起泡到足以达到#someCommonAncestor的水平时，jQuery将检查目标元素是否与您传递给.on()的选择器匹配.如果是这样，它将执行事件处理程序.如果没有，事件将继续冒泡到文档的根目录，并且不会触发任何处理程序.
The element on which you call .on() must exist in the DOM at the time the code runs. When the event bubbles up far enough to reach whatever #someCommonAncestor may be, jQuery will check to see if the target element matched the selector you passed to .on(). If it does, it will execute the event handler. If it doesn't, the event will continue bubbling to the root of the document and not trigger any handler.
这篇关于新添加的对象不会响应页面加载中的jQuery事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
