爲什麼是一次性功能？

Question

我剛剛開始玩jQuery，並創建了一個簡單的函數。它工作正常，除了這個事實，它是活躍的並且只是第一次繼續工作。 （該功能本身就像選擇列表）。當您再次單擊它時，它不響應。

$('.selected').click(function(){ 
 
      $(this).removeClass('selected').addClass('selectoption'); 
 
      $('.selectoption').show().click(function(){ 
 
       $(this).removeClass('selectoption').addClass('selected'); 
 
       $('.selectoption').hide(); 
 
      }); 
 
     return true; 
 
    });

.selectoption { 
 
    display: none; 
 
    float: right; 
 
    clear: both; 
 
    margin-top: 3px; 
 
    padding: 5px 10px 5px 10px; 
 
    text-align: right; 
 
    color: #FFFFFF; 
 
    background: #3399FF; 
 
    border: solid #ffcc00 1px; 
 
} 
 
.selected { 
 
    display: block; 
 
    border-bottom: dashed #3399FF 1px; 
 
}

<div style="display: block; position: absolute; top: 32px; right: 220px; border: 0;"> 
 
          <a href="#" class="selected">1</a> 
 
          <a href="#" class="selectoption">2</a> 
 
          <a href="#" class="selectoption">3</a> 
 
          <a href="#" class="selectoption">4</a> 
 
         </div>

Answer 1

.click()只綁定到存在於所綁定的事件時DOM節點。您的代碼假定事件綁定到事件本身發生時存在的DOM節點。

該第一行僅將click函數綁定到當前具有'.selected'類的元素 - 因此只有HTML中的第一個錨標記具有綁定到它的單擊事件。調用此事件答：

$('.selected').click(function(){ 
     $(this).removeClass('selected').addClass('selectoption'); 

在單擊該第一錨，你綁定一個新的單擊事件到錨的所有四個（因爲你已經從第一錨刪除「.selected」類，並添加」。 selectoption'）。調用此事件B：

 $('.selectoption').show().click(function(){ 
      $(this).removeClass('selectoption').addClass('selected'); 
      $('.selectoption').hide(); 
     }); 
    return true; 
}); 

所以你的錨1第一次點擊後，錨1將觸發事件都A和事件B時，下一個被點擊（一個新的事件結合到同一個元素不會取代現有的事件）。其餘的錨點只會觸發事件B.

您實際上想要的行爲可以通過在父元素上使用.on（）來實現 - 這有效地將事件綁定到CSS選擇器而不是特定的DOM節點，以便當用戶單擊父元素時，你的代碼檢查，看看是否被點擊的目標類選擇匹配：

$('.parent') 
 
     .on('click', '.selected', function(evt) { 
 
     $(evt.target).removeClass('selected').addClass('selectoption'); 
 
     }).on('click', '.selectoption', function(evt) { 
 
     $('.selected').removeClass('selected').addClass('selectoption'); 
 
     $(evt.target).removeClass('selectoption').addClass('selected'); 
 
     });

.selected { 
 
    background-color: #F00 
 
} 
 
.selectoption { 
 
    background-color: #0F0 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <a href="#" class="selected">1</a> 
 
    <a href="#" class="selectoption">2</a> 
 
    <a href="#" class="selectoption">3</a> 
 
    <a href="#" class="selectoption">4</a> 
 
</div>

（我刪除了 hide()和 show()，改變了CSS規則，使其更容易地看到發生了什麼事情，但除此之外，這表現得像我認爲的那樣。）

所以現在兩個點擊事件綁定到.parent;如果父代中的點擊目標匹配.select，則第一個會觸發，如果點擊目標匹配.selectoption，則第二個會觸發 - 而且與原始代碼不同，類匹配是實時的，因此您可以安全地更改DOM元素上的類，或者綁定事件後添加新元素，並使行爲遵循新的類名。

在 '委託事件' 這裏詳細瞭解了起來：http://api.jquery.com/on/

Answer 2

要卸下類，所以它不能再被發現。這是最好的一個額外的類聽添加到點擊

<div style="display: block; position: absolute; top: 32px; right: 220px; border: 0;"> 
    <a href="#" class="option selected">1</a> 
    <a href="#" class="option">2</a> 
    <a href="#" class="option">3</a> 
    <a href="#" class="option">4</a> 
</div> 

然後簡化你的腳本到

$('.option').click(function() { 
    $(".option").removeClass('selected'); // we need to remove all selected classes first ;) 
    $(this).addClass('selected'); 
    return true; 
});