我有一个 jQuery onclick 问题答案

【问题标题】：I'm having a jQuery onclick issue我有一个 jQuery onclick 问题
【发布时间】：2012-10-19 18:52:08
【问题描述】：

所以我用一个例子来解释一下。

我的提要或信息流有一个“赞”按钮（类：.like）。当用户单击它（使用 $(".like") ）时，它会以 ajax 方式将类似的内容无刷新插入数据库（使用 jQuery）。

插入后，我将文本更改为“Unlike”，将类更改为“.unlike”。

但是，当用户再次单击它时，它只是再次执行相同的函数，而不是转到 $(".unline").click 函数。我必须“更新”脚本吗？

例如：

    $(".like").click(function(){
       alert("Like!");
       $(this).attr("class", "unlike");
    });
    $(".unlike").click(function(){
       alert("Unlike!");
       $(this).attr("class", "like");
    });

问题是它不会针对like函数，即使属性改变了它也会重复like函数。

【问题讨论】：

标签： javascript jquery function click

【解决方案1】：

那是因为“不像”属性。脚本加载时尚未添加到 dom 中。试试这个：

<body>
<div class="like_it_or_not">
   HELLO!
</div>
</body>

还有 JS

$("body").on('click','.like_it_or_not', function(){
    $(this).toggleClass('like', 'unlike');
    if ($(this).hasClass('like')) {
       alert('like');
    } else if ($(this).hasClass('unlike')) {
       alert('unlike');
    }
});

【讨论】：

【解决方案2】：

如果你不想委托你的点击事件（这是过度设计的 IMO），请检查处理程序：

$(".like").click(function(){
   alert( $(this).hasClass('unlike') ? 'unlike' : 'like' );
   $(this).toggleClass("unlike like");
});

http://jsfiddle.net/NScyM/

每次单击并按预期切换类时，它应该检查“不同”类。

【讨论】：

最好，绕过所有这些对事件委托的大惊小怪，使用单个处理程序。

【解决方案3】：

事件绑定发生在您指定运行上述代码时。您必须每次都重新绑定事件，或者更好的是，使用事件委托：

$(document)on("click",".like",function(){
   alert("Like!");
   $(this).addClass("unlike");
   $(this).removeClass("like");
});
$(document)on("click",".unlike",function(){
   alert("Unike!");
   $(this).addClass("like");
   $(this).removeClass("unlike");
});

【讨论】：

不，这破坏了我的代码：o。控制台中什么都没有……很奇怪

【解决方案4】：

我认为您必须使用 live() 或 on() 才能完成这项工作：

 $(".like").live("click", function() {
    $(this).removeClass("like").addClass("unlike");
 });
 $(".unlike").live("click", function() {
    $(this).removeClass("unlike").addClass("like");
 });

【讨论】：

从 jquery 1.7 开始，仅供参考 live 已被弃用
同上。使用 $('parent').on('click', '.childClass', function(){});
呃，live 被弃用了？这是唯一有效的方法：/
你试过大卫的解决方案了吗？
@Schart - 是的，live 已弃用，您应该改用 on。

【解决方案5】：

试试这个

$(".like").click(function(){
   alert("Like!");
   $(this).removeClass("like");
   $(this).attr("class", "unlike");
});
$(".unlike").click(function(){
   alert("Unlike!");
   $(this).removeClass("unlike");
   $(this).attr("class", "like");
});

【讨论】：

【解决方案6】：

为了让我的代码在这样的事情上保持干净，我分配了一个永远不会改变的类，并将点击事件与它联系起来。样式类只是作为 CSS 更改。例如：

<button class="vote like">button text</button>

$('.vote').click(function () {
    var alertText = ($(this).hasClass('like')) ? 'Like!' : 'Unlike!';
    alert(alertText);
    $(this).toggleClass('like').toggleClass('unlike');
});

【讨论】：

【解决方案7】：

试试这个

$(document).on('click', '.like', function(){
   alert("Like!");
   $(this).html('Unlike').removeClass("like").addClass("unlike");
});

$(document).on('click', '.unlike', function(){
   alert("Unlike!");
   $(this).html('Like').removeClass("unlike").addClass("like");
});

DEMO.

【讨论】：

我投了反对票，因为考虑到这个问题，给出的解决方案比它需要的复杂得多。此外，如果 DOM 包含具有相同类名的其他元素，则会产生意想不到的结果。所以，恕我直言，这不是一个理想的解决方案，即使它“有效”。
@David，OP 需要两个不同的处理程序来处理两个类，所以无论如何，如果（根据你）这是一个复杂的答案，那么这并不意味着你应该投反对票，因为它在当前的问题状态下工作，您可能刚刚发表了评论，因为它现在仍然是一个正确的答案。
@SheikHeera 为什么他需要两个不同的处理程序？它是同一个元素，因此只需要一个处理程序。
@David，因为他在问题中用两个不同的处理程序说明了这一点。

【解决方案8】：

unlike click 事件处理程序尚未与新项目关联。如果您要像那样动态更改类，则需要查看（jQuery on 处理程序）[http://api.jquery.com/on/]

$(document).on('click',".like", function(){
   alert("Like!");
   $(this).addClass("unlike").removeClass('like');

});
$(document).on('click',".unlike",function(){
   alert("Unlike!");
   $(this).addClass("like").removeClass('unlike');
});

【讨论】：

Here is a demo with your code that's not working and it shouldn't.
这不会动态绑定到 DOM 元素。你这里的和 .click() 是一样的。
叹息，这就是我从问题中复制和粘贴而没有注意的结果。