Question

真的与这个混淆了。我通过'add-bookmark'类选择'a'元素。单击a元素将该元素的类切换为'bookmarked'，因此无法再次单击该元素。

第一次点击它时，切换功能成功，并使用新增的'bookmarked'类删除'add-bookmark'来更新元素。当我再次单击该元素时，即使该类与选择器的类不匹配，jquery仍然有效吗？

$('.add-bookmark').click(function(e){
    e.preventDefault();

    var uri_segment = $(this).attr('href');
    $(this).animate({opacity: 0}, 'slow', function() {
        $.ajax({
            type: "POST",
            url: uri_segment,
            success: function(data) {
                $('.add-bookmark').toggleClass('add-bookmark bookmarked');
                $('.bookmarked').animate({opacity: 100}, 'slow');
            }
        });
    });
});

这可能与DOM没有更新toggleClass吗？

任何帮助都会很棒，谢谢！

本

Answer 1

仍然有效，因为你已经为onClick事件添加了一个回调函数，你可以添加一个检查DOM元素是否还有这个类：

$('.add-bookmark').click(function(e){
    e.preventDefault();
    if (!$(this).hasClass('add-bookmark'))
        return(false);

    var uri_segment = $(this).attr('href');
    $(this).animate({opacity: 0}, 'slow', function() {
        $.ajax({
            type: "POST",
            url: uri_segment,
            success: function(data) {
                $('.add-bookmark').toggleClass('add-bookmark bookmarked');
                $('.bookmarked').animate({opacity: 100}, 'slow');
            }
        });
    });
});

Answer 2

它没有，您使用原始选择器将事件附加到<a>元素。当你第一次点击它动画并更新类时（删除添加书签类并添加书签类）。

工作示例：

http://jsfiddle.net/fYqWD/

您可以使用unbind()调用删除点击事件，以防止点击事件再次触发

Answer 3

尝试从$（this）

取消绑定事件

$('.add-bookmark').click(function(e){
    e.preventDefault();

    var uri_segment = $(this).attr('href');
    $(this).animate({opacity: 0}, 'slow', function() {
        $.ajax({
            type: "POST",
            url: uri_segment,
            success: function(data) {
                $('.add-bookmark').toggleClass('add-bookmark bookmarked');
                $('.bookmarked').animate({opacity: 100}, 'slow');
            }
        });
    }).unbind('click');
});

Answer 4

尝试取消绑定！

$('.add-bookmark').click(function(e){
    e.preventDefault();

    var uri_segment = $(this).attr('href');
    $(this).animate({opacity: 0}, 'slow', function() {
        $.ajax({
            type: "POST",
            url: uri_segment,
            success: function(data) {
                $('.add-bookmark').toggleClass('add-bookmark bookmarked');
                $('.bookmarked').animate({opacity: 100}, 'slow');
                $(this).unbind("click");
            }
        });
    });
});

Answer 5

执行代码时，单击处理程序将附加到元素。选择器仅用于选择当时的元素。附加处理程序后，更改元素的方式并不重要（除了显式删除事件处理程序）。

您希望点击处理程序仅触发。然后，您可以使用one ^[docs]：

$('.add-bookmark').one('click', function(e){
    //...
});

或者你希望元素响应click，但只有当它有类.add-bookmark时（即你将以某种方式再次添加这个类）。然后，您应该使用hasClass ^[docs]：

检查元素当前是否具有此类

$('.add-bookmark').click(function(e){
   if($(this).hasClass('add-bookmark')) {
       //...
   }
});

Answer 6

这是因为您使用“click（）”，处理程序事件一次性设置。

使用“live（）”代替点击：

$('.add-bookmark').live('click', function(e){...

JQuery元素选择器问题

6 个答案: