jQuery事件，简单单击，如何以及为什么？

Question

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

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

因此，我开始使用它…… http://api.jquery.com/live/ ...猜猜是什么，jquery团队照常做，不赞成使用它，说我应该使用“ on”。

这些功能的行为有很大不同，但jquery文档说我应该互换使用，所以...

有人可以解释这种“开”的含义吗，以及如何在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调用后都对其进行调用，然后重新运行此代码。

这似乎是我的后退一步...还是我错过了这里的东西？

Answer 1

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

// 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()

因此，无需同时使用它们。

Answer 2

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的示例，但是您可以根据自己的特定需求使用任何选择器。

Answer 3

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

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

要么：

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

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

Answer 4

相当于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;
});

它确实基于事件委派。

Answer 5

您永远无法将事件侦听器实际附加到DOM中尚不存在的元素。 什么live和on方法做的是连接监听器上，现在存在父。 live只不过是on附着在document本身。