jquery 绑定事件到动态加载的 html 元素

jquery binding events to dynamically loaded html elements

提问by ahhishek

using jquery we can attach event handlers to the elements present in page, this is done inside document.ready() function. Now my difficulty is i have some elements like links etc loaded later (using ajax request) after document is downloaded . So those new elements are failing to bind with the handlers I defined in page. Is there any way to know when followed ajax queries are finish and then inside that i can bind my event handlers.

使用 jquery 我们可以将事件处理程序附加到页面中的元素，这是在 document.ready() 函数中完成的。现在我的困难是我有一些元素，如链接等，在下载文档后稍后加载（使用 ajax 请求）。所以这些新元素无法与我在 page.js 中定义的处理程序绑定。有什么方法可以知道跟随的 ajax 查询何时完成，然后在里面我可以绑定我的事件处理程序。

Thanks in advance

提前致谢

回答by user113716

The various ajaxmethods accept a callback where you can bind the handlers to the new elements.

各种ajax方法都接受回调，您可以在其中将处理程序绑定到新元素。

You can also use event delegationwith the delegate()^[docs]method or the live()^[docs]method.

您还可以将事件委托与delegate()^[docs]方法或live()^[docs]方法一起使用。

The concept of event delegation is that you do notbind the handler to the element itself, but rather to some parent container that exists when the page loads.

事件委托的概念是您不将处理程序绑定到元素本身，而是绑定到页面加载时存在的某个父容器。

The events bubble up from the elements inside the container, and when it reaches the container, a selector is run to see if the element that received the event should invoke the handler.

事件从容器内的元素冒泡出来，当它到达容器时，将运行选择器以查看接收事件的元素是否应该调用处理程序。

For example:

例如：

<div id="some_container"> <!-- this is present when the page loads -->

    <a class="link">some button</a>  <!-- this is present when the page loads -->
    <a class="link">some button</a>  <!-- this is present when the page loads -->
    <a class="link">some button</a>  <!-- this is present when the page loads -->


    <a class="link">some button</a>  <!-- this one is dynamic -->
    <a class="link">some button</a>  <!-- this one is dynamic -->
    <a class="link">some button</a>  <!-- this one is dynamic -->

    <span>some text</span>  <!-- this one won't match the selector -->
    <span>some text</span>  <!-- this one won't match the selector -->

</div>

Live Example:http://jsfiddle.net/5jKzB/

现场示例：http : //jsfiddle.net/5jKzB/

So you bind a handler to some_container, and pass a selector to .delegate()that looks for "a.link"in this case.

因此，您将处理程序绑定到some_container，并将选择器传递.delegate()给"a.link"在这种情况下查找的。

When an element that matches that selector is clicked inside of some_container, the handler is invoked.

当在 中单击与该选择器匹配的元素时some_container，将调用处理程序。

$('#some_container').delegate('a.link', 'click', function() {
    // runs your code when an "a.link" inside of "some_container" is clicked
});

So you can see that it doesn't matter when the "a.link"elements are added to the DOM, as long as the some_containerexisted when the page loaded.

所以你可以看到，"a.link"元素何时添加到 DOM并不重要，只要some_container页面加载时存在即可。

The live()^[docs]method is the same, except that the container is the document, so it processes allclicks on the page.

的live()^[文档]方法是相同的，不同之处在于容器是document，因此它处理所有页面上点击。

$('a.link').live('click',function() {
    // runs your code when any "a.link" is clicked
});

回答by Francois Deschenes

Then you'll want to use .live(). Have a look at http://api.jquery.com/live/.

然后你会想要使用.live(). 看看http://api.jquery.com/live/。

Example:

例子：

$('a').live('click', function() {
  // Do something useful on click.
});

In the example above, any A elements, whether already existing or loaded after the document is loaded, will trigger the click event.

在上面的例子中，任何 A 元素，无论是已经存在的还是在文档加载后加载的，都会触发 click 事件。

回答by Ronald De Ruiter

These answers are now obsolete since the .live() method has been deprecated since version 1.7 of jQuery. For jQuery 1.7+ you can attach an event handler to a parent element using .on()

这些答案现在已经过时了，因为自 jQuery 1.7 版以来 .live() 方法已被弃用。对于 jQuery 1.7+，您可以使用 .on() 将事件处理程序附加到父元素

回答by Jason Miesionczek

bind them using .live(). It will attach the event handler to any element that matches the selector even if it doesn't exist on the page yet.

使用.live()绑定它们。它会将事件处理程序附加到与选择器匹配的任何元素，即使它在页面上还不存在。