Question

让我们说在一个HTML文档中，我有一堆像这样的链接：

<a href="#path" class="the_link_1">Click here 1</a>
<a href="#path" class="the_link_2">Click here 2</a>
<a href="#path" class="the_link_3">Click here 3</a>
<a href="#path" class="the_link_4">Click here 4</a>
etc...

我有这样的jquery代码：

$("a[class^=the_link_]").each(function(){

    $(this).live("click", function(){

        alert($(this).html());

    });

});

当我使用$(this).click(function(){ ... });时，为什么这样可行？但是当我使用$(this).live("click", function(){ ... });时它不起作用？

谢谢

Answer 1

.live很奇怪，只适用于选择器。我的意思是$('div').live有效，而$(div).live没有。

此外，将点击处理程序应用于多个元素时，您不需要.each。 $("a[class^='the_link_']").click按预期工作。

您的代码应为：

$("a[class^='the_link_']").live("click", function(){
    alert($(this).html());
});

更新：自jQuery 1.7起，.live()已弃用，请改用.on()。

$(document).on('click', "a[class^='the_link_']", function(){
    alert($(this).html());
});

注意：如果所有<a>标记都在一个容器中，您可以用该容器替换$(document)（只要它始终在DOM中）。

编辑：你真的需要在这里使用.live吗？它用于将事件绑定到元素，即使它们稍后添加到DOM中也是如此。如果您从未通过JavaScript添加更多<a>标记，那么请执行以下操作：

$("a[class^='the_link_']").click(function(){
    alert($(this).html());
});

Answer 2

你忘记了the_link_周围的撇号。而且它太复杂了。

保持简单：

$("a[class^='the_link_']").live("click", function(){
        alert($(this).html());
});

从pQuery 1.7开始，不推荐使用

live。请改用on。

$(document).on("click", "a[class^='the_link_']", function(){
    alert($(this).html());
});

在这里演示：http://jsfiddle.net/Sfsdx/

.on() – jQuery API

<强>微笑！：）

Answer 3

您使用的是哪个版本的jQuery？如果您使用的是1.7.x，则不推荐使用.live（）方法。请参阅official jQuery documentation。

那就是说，你可以试试.on方法：

$(this).on('click', function(){ .... }

jquery .live没有被调用

3 个答案: