Question

在jQuery中使用live是什么意思？我的意思是我们什么时候使用它。

我试图将onclick事件添加到锚标记中，但它无效。然后我用了：

$('#Register').live('click', function (e) {
    $("#storytellerregistration").fadeIn("slow");
});

这很有效。我们究竟应该使用live函数吗？

Answer 1

Quoting Docs:

（强调我的）

描述：为与之匹配的所有元素附加事件处理程序当前选择器，现在和将来。

注意and in the future部分，它指的是那些不存在但将来会被添加的元素。

因此，您可以将live()用于通过JS / jQuery在页面中添加动态 /稍后的元素。

总之，live()适用于加载文档时存在的元素，以及通过JS / jQuery添加以后的元素。

我们假设我们创建一个div并将其附加到body：

$('<div />').attr('id', 'mydiv').append('body');

既然我们自己以后添加了这个元素/更加加载了页面，我们就必须使用live()作为这样的元素。

$('#mydiv').live('click', function(){ ... });

注意： live()是不推荐使用的方法，在将来的jQuery版本中无效。改为开始使用on()方法：）

Answer 2

.live()（或jQuery 1.7以来的.on()）的目的是在调用函数时，它会监听DOM中可用元素的事件，，但也来自未来元素< / strong>如果您将来动态地向DOM添加一个与选择器匹配的元素。

与.click()相比，{{1}}仅侦听与您的选择器匹配的DOM元素的click事件，并且在调用该方法时在DOM中可用。

Answer 3

现在在最新版本jQuery中已弃用。它已被'on'替换。 'live'和'on'的目的是能够将事件处理程序附加到处理事件的父元素，而不是为每个子元素都有一个事件处理程序。

例如，假设您有一个包含1000个'a'元素的div。您可以在父div上拥有一个事件处理程序，并选择“a”作为选择器，而不是拥有1000个事件处理程序（每个元素一个）。

对于将来某个时候添加到页面的动态元素也很有用。

Answer 4

一个例子是在加载此页面后数据进入html页面。例如，你有一个

news1信息转到新闻1

news2 info转到新闻2

然后你追加到ajax

news3 info Go go新闻3.在使用ajax之前你有：

$(function(){
    $("p").css({border: "3px solid #c00"});
});

当加载news3时，段落将不会获得3px实心#c00边框，因为该属性在加载此段落之前应用于所有段落。在这种情况下，使用实时jQuery函数将确保新加载的新闻段落将获得所需的边框属性。示例代码：

$(function(){
        $("p").live("click", function (e) {
            $(this).css({border: "3px solid #c00"});
        });
});

此处的最后一个示例，单击按钮添加更多段落，然后单击段落以获得边框效果：

<!DOCTYPE html>
<html>
<head>
    <style>
    p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="submit" value="Add paragraph" id="addp"></span>
<p>Initial paragraph 1!</p>
<p>Initial paragraph 2!</p>
<p>Initial paragraph 3!</p>
<script>
$("#addp").click(function(){
    $(this).after("<p>Another paragraph!</p>");
});
$("p").css({border: "3px solid #c00"});
$("p").live("click", function (e) {
    $(this).css({border: "3px solid #c00"});
});

</script>

</body>
</html>

Answer 5

与.live()或.delegate()相关联的事件处理程序将在事件发生时与选择器匹配的元素被触发，可能包括在设置绑定的时间。

与.bind()或.click()附加的事件处理程序（或其他快捷方式事件方法，如.keyup()或.submit()）将针对与选择器匹配的元素触发在进行绑定时 - 即使这些元素在事件发生时不再与选择器匹配。

jQuery 1.7中引入的.on()方法可以根据您传递的参数设置任何一种事件处理程序。

在您的情况下，最有可能使用.live()工作的地方.click()没有，因为

该代码所在的脚本块出现在html中的元素之前，因此该元素尚未被解析，无法找到立即绑定（在这种情况下，您可以通过移动脚本块来修复它）在元素之后和/或将代码放在document.ready处理程序中）或
元素是在代码运行后动态创建的

有关详细信息，请阅读jQuery events doco。

Answer 6

当您的容器DOM被修改并且您想要捕获新元素上的事件时，您使用live()。

不推荐使用函数live（），因此我建议您升级代码以改为使用新的on()函数。

$('#Register').on('click', function (e) {
    $("#storytellerregistration").fadeIn("slow");
});

阅读API's docs site

中on（）函数的文档

需要jQuery Live功能帮助

6 个答案: