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元素選擇器問題

回答

相關問題