JQuery元素选择器问题

真的和这个混淆。我正在通过其'add-bookmark'类来选择'a'元素。点击一个元素会将该元素的类切换为“书签”，所以它应该不能再次点击。JQuery元素选择器问题

在第一次点击它时，切换成功并使用新的“书签”类删除“添加书签”更新元素。当我再次单击该元素时，即使类与选择器的类不匹配，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'); 
      } 
     }); 
    }); 
});

请问这是否与在toggleClass上不更新的DOM有关？

任何帮助将是伟大的，谢谢！

本

来源

2011-03-10 Ben

建议：创建http://jsfiddle.net/一个例子你正在试图做的，使我们可以更好地帮助你什么。 – tiagoboldt 2011-03-10 13:41:12

执行代码时，单击处理程序将附加到元素。选择器仅用于选择当时的元素。一旦处理程序被连接，不管你如何改变元素。 – 2011-03-10 13:44:23

Felix有你的答案，如果你不想让点击事件发生在绑定到元素之后，你将不得不解除它。看看jquery api中的取消绑定函数[这里]（http://api.jquery.com/unbind/） – Kyle 2011-03-10 13:49:50

这是因为您可以使用“点击（）”，即一个处理事件设置一个时间，直到永远。

使用“现场（）”，而不是点击：

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

来源

2011-03-10 13:48:33 Akarun

尝试从$（本）

$('.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'); 
});

来源

2011-03-10 13:41:28 Blowsie

这不是OP想要的 - 你正在* * .add-bookmark和* .bookmarked'会触发处理程序。 – BoltClock 2011-03-10 13:42:27

已更新，thx指出了@boltclock – Blowsie 2011-03-10 13:47:14

我会说你可能想要在成功处理程序中发生解除绑定，否则这些类最终可能不会更改，但如果ajax调用失败，则单击事件将解除绑定。 – 2011-03-10 13:52:31

仍然有效，因为你已经添加了回调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'); 
      } 
     }); 
    }); 
});

来源

2011-03-10 13:45:27 Terseus

它不，你使用原来选择的事件附加到<a>元素。当您第一次单击时，它会动画并更新类（删除添加书签类并添加书签类）。

工作例如：

http://jsfiddle.net/fYqWD/

您可以使用unbind()调用，以防止点击事件的再次发射

来源

2011-03-10 13:46:10 JamesHalsall

尝试删除解除绑定click事件！

$('.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"); 
      } 
     }); 
    }); 
});

来源

2011-03-10 13:48:10 Quincy

执行代码时，单击处理程序会附加到元素。选择器仅用于选择当时的元素。一旦处理程序被连接，不管你如何改变元素（除了显式移除事件处理程序）。

要么你想单击处理火只有一次。然后你可以使用one^[docs]：

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

或者你想要的元素响应点击，但只有当它有.add-bookmark类（即你又会莫名其妙地添加该类后者）。然后，你应该检查元素当前是否具有这个类，使用hasClass^[docs]：

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

来源

2011-03-10 13:48:17

JQuery元素选择器问题

回答

相关问题