Question

我有JQUERY动态加载（.load）一段代码。它有按钮，应该响应以下内容：

$(":button").on('mouseout mouseover', ETC... );

这些新加载的按钮不会继承mouseout鼠标悬停事件。我怎样才能解决这个问题？我尝试在加载的元素中重复使用代码，但后来我将鼠标悬停在旧的加载元素上。

Answer 1

$(document).on('mouseout mouseover', ':button', function () { /*...*/ });

Answer 2

对于那些寻找这个答案的人来说，问题是你不能将事件附加到你尚未创建的元素（例如，你通过ajax动态加载）。

简单的解决方案是在容器元素上侦听事件。这是event delegation的一项功能。

当其中一个动态元素（例如点击）发生事件时，事件会通过DOM树冒泡，让每个父母都有机会倾听并对该事件做出反应。

示例HTML：

<div id="container"></div>

示例JS：

// Populate container dynamically (could be via AJAX)
$('#container').html('<button class="button">Dynamic Button</button>');

$('#container').on('click', '.button', function() {
   // This attaches the listener to a container element.
   // When the child '.button' element is clicked the event will bubble up and
   // we can handle it here.
});

$(document).on('click', '.button', function() {
   // This one is bound at the document level and will also fire unless
   // an listener stops the propagation. It would fire last.
});

那么你应该把你的听众连接到哪一个？如果你有一个持久的容器，那么将监听器连接到容器（而不是一直在document的顶部）是更有效的，因为它可以更快地处理（减少冒泡）。

新加载的jquery .load元素不响应.on事件

2 个答案: