Question

我在解除特定元素上的click事件时遇到问题。这是我的JS代码。

    $(document).on('click','.likecomment', function(e){
        e.preventDefault();
        var commentid = $(this).data('commentid');
        $.ajax({
            type: 'POST',
            url: '?category=likecomment',
            data: {
                "commentid" : commentid
            },
            success: function(){
                $(this).unbind('click');
                var likes = $('#'+commentid+'-likes').text();
                likes++;
                $('#'+commentid+'-likes').html(likes);
            }
        });
    return false;
});

单击后元素的功能仍然存在。如何在首次点击后阻止它被点击？如果代码是正确的，我可能会自己找出问题，但我只是想确保代码是否正确。

Answer 1

使用匹配的.off语法。

$(document).off('click','.likecomment');

或使当前元素不再与.likecomment

匹配

$(this).removeClass("likecomment");

或

$(this).removeClass("delegated");
// with this change to binding method:
$(document).on('click','.likecomment.delegated', function(e){

但请注意，成功通话中的this不在其中this之外，您需要添加此ajax选项：context: this,以便{{1}你的ajax中的内容与你在ajax之外的内容相同。

Answer 2

这可能是因为您在成功处理程序中解除绑定。如果您的ajax呼叫需要一段时间，那么您的解除绑定也需要一段时间。所以在$ .ajax尝试之后：

$(this).prop({disabled: true});

Answer 3

因为您要将事件委托给document对象，所以处理程序绑定在document上，而不是绑定在每个.likecomment元素上。

如果委托事件有多个元素匹配，您可能不希望取消绑定事件，并且您可能不希望删除likecomment类，因为它可能与样式相关联。

相反，使用选择器在添加另一个类时强制不匹配。此示例正在使用done，但您可能需要finished，liked或其他类名称：

$(document).on('click', '.likecomment:not(.done)', function () {...});

如果要阻止元素导致单击事件，请将done类添加到元素中：

$(this).addClass('done');

添加新类还提供了一个用于更改likecomment样式的钩子，使其不再具有可点击性。

unbind点击里面的（）;

3 个答案: