jQuery绑定事件动态加载html元素 [英] jquery binding events to dynamically loaded html elements

问题描述

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

提前感谢

解决方案

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

您还可以将事件委派与 delegate（） ^[docs] 方法或 live（） ^[docs] 方法

事件委派的概念是你不要将处理程序绑定到元素本身，而是绑定到一些父容器当页面加载时存在。

事件从容器内的元素起泡，当它到达容器时，会运行一个选择器来查看是否收到的事件应该援引例如：

 < div id = some_container > <！ - 当页面加载时存在 - > 
 
< a class =link>某些按钮< / a> <！ - 当页面加载时存在 - > 
< a class =link>某些按钮< / a> <！ - 当页面加载时存在 - > 
< a class =link>某些按钮< / a> <！ - 当页面加载时存在 - > 
 
 
< a class =link>某些按钮< / a> <！ - 这是动态的 - > 
< a class =link>某些按钮< / a> <！ - 这是动态的 - > 
< a class =link>某些按钮< / a> <！ - 这是动态的 - > 
 
< span>某些文字< / span> <！ - 这个不匹配选择器 - > 
< span>某些文字< / span> <！ - 这个不匹配选择器 - > 
 
< / div> 
  

实例： http://jsfiddle.net/5jKzB/

所以你将一个处理程序绑定到$ code> some_container ，并将选择器传递给 .delegate（），寻找a.link





当在$ code> some_container 内点击匹配该选择器的元素时，调用处理程序。

  $（'＃some_container'）。delegate（'a.link'，'click' ）{
 //当some_container中的a.link被点击
}时，运行你的代码）; 
  

所以你可以看到，当a。链接元素添加到DOM中，只要 some_container 在加载页面时就存在。

live（） ^[docs] 方法是一样的，除了容器是文档，所以它处理所有

  $（'a.link'）。live（'click'，function ）{
 //当任何a.link被点击
}时运行你的代码）; 
  

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.

Thanks in advance

解决方案

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

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

The concept of event delegation is that you do not bind 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/

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

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

$('#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_container existed when the page loaded.

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

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

这篇关于jQuery绑定事件动态加载html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！