6

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

提前致谢

4

4 回答 4

23

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

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

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

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

例如：

<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>

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

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

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

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

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

[ live()docs]方法是一样的，只是容器是document，所以它处理页面上的所有点击。

$('a.link').live('click',function() {
    // runs your code when any "a.link" is clicked
});
于 2011-06-19T03:35:12.667 回答
4

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

例子：

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

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

于 2011-06-19T03:34:28.987 回答
2

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

于 2014-02-06T21:24:19.293 回答
0

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

于 2011-06-19T03:34:17.783 回答