0

所以我在页面（表格）上有一些数据，这些数据基于其他地方的一些选项可能会从服务器重新加载 ajax。该表中有按钮，可以单击这些按钮来使表中的记录发生其他事情。

我注意到这 ... http://api.jquery.com/on/ ... 是将简单事件处理程序附加到元素的推荐方法，但仅附加到现在存在的元素，以及当我执行 ajax 时加载我丢失了附加的处理程序。

所以我开始使用这个... http://api.jquery.com/live/ ...猜猜是什么，jquery团队照常使用并弃用它说我应该使用“on”。

这些函数的行为非常不同，但 jquery 文档说我应该互换使用它们，所以......

有人可以解释这个的“on”等价物，以及在ajax调用替换以前附加到的元素之后如何让它与元素一起工作......

 $("some selector").live('click', function (e) {
            // some code code
            e.preventDefault();
            return false;
        });

我的理解是你会做类似的事情......

 $("some selector").on('click', function (e) {
            // some code code
            e.preventDefault();
            return false;
        });

我的猜测是，在执行我的 ajax 调用后，我必须重新运行此代码，方法是将其放入某种“initClicks”函数中，并在页面加载和 ajax 调用之后调用它。

这对我来说似乎有点退步......或者我在这里错过了什么？

4

5 回答 5

3

由于元素是动态添加的，因此需要使用事件委托来注册事件处理程序

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('click', 'some selector', function(event) {
    // some code code
    e.preventDefault();
    return false; 
});

此外，使用e.preventDefault()或return false, 作为：

return false = e.preventDefault() + e.stopPropagation()

因此，没有必要同时使用它们。

于 2013-11-01T10:36:20.470 回答
1

live()不是魔术，它看不到未来的元素，它所做的是将一个侦听器附加到页面的第一个根元素document并检查每个冒泡事件是否与您的目标选择器匹配，当它找到匹配项时，它会执行您的功能.

这称为事件委托

live()已被弃用有充分的理由，主要是使用它造成的性能损失。

然后 jQUery 团队介绍了该delegate()功能，它为我们提供了一种获得确切结果的新方法，但它通过将监听冒泡事件的范围限制为您现在和未来可能最近的父级，非常巧妙地解决了性能问题元素。

当他们介绍该On()功能时，他们使您能够将其用作普通事件处理程序，或用作未来元素的委托处理程序。

所以我相信他们在这方面做得很好，让我们可以根据具体情况灵活地使用它。

代码示例：

使用delegate()：

$( "#TAGERT_ID" ).delegate( "a", "click", function() { // your code goes here}

使用on()（用于委托事件）

$( "#TAGERT_ID" ).on( "click", "a", function() { // your code goes here}

两种方式都是相同的，并且将处理将来a在您的TARGET_ID元素中添加的未来点击。

TARGET_ID是为您的选择器使用 ID 的示例，但您可以根据您的特定需要使用任何选择器。

于 2013-11-01T10:40:05.773 回答
1

使用.on('click', function (e) {})函数时，它仅适用于现有元素。要处理所有selector元素的点击事件，即使是将来添加的元素，您也可以使用以下函数之一：

$(document).on('click', "some selector", function (e) {
    // some code code
    e.preventDefault();
    return false;
});

或者：

$("body").delegate("a", "click", function () {
    // your code goes here
});

有关更多信息，请阅读有关了解事件委托的文章

于 2013-11-01T10:55:14.273 回答
0

您永远无法将事件侦听器实际附加到 DOM 中尚不存在的元素。做什么live和on方法是将侦听器附加到现在存在的父级上。live无非是对自身的on依附。document

于 2013-11-01T10:38:28.170 回答
0

相当于说live是

$(document).on('click', "some selector", function (e) {
    // some code code
    e.preventDefault();
    return false;
});

on()是所有事件处理程序格式的单站，您使用的模型与

$("some selector").click(function (e) {
    // some code code
    e.preventDefault();
    return false;
});

它确实基于事件委托。

于 2013-11-01T10:35:02.793 回答