Jquery在生成列表元素時點擊奇怪行爲

Question

我會先發布代碼，然後嘗試詳細討論我的問題。

  projNav.on('click', '#editProj', function(event) { 
      event.preventDefault(); 
      clearContent(returned); 
      clearContent(projEditor); 

      var editMain = $('#editMain'), 
       editNav = $('#editNav'), 
       layerCount = 1; 

      // Add new layer button 
      projEditor.html('<div id="editNav"><ul id="layers"><li id="new_layer">+</li></ul></div><div id="editMain"></div>'); 
      // Add new layer button functionality 
      projEditor.on('click', '#new_layer', function(event) { 
       event.preventDefault(); 
       $('#layers').append('<li id="layer" name="layer'+layerCount+'">'+layerCount+'</li>'); 
       layerCount++; 
      }); 

      // Clicking on layer functionality 
      projEditor.on('click', '#layer', function(event) { 
       event.preventDefault(); 
       var name = $(this).attr('name'); 
       console.log(name); 
      });    
     }); 

所以基本上我們在這裏是一個按鈕（#editproj），點擊它時，它會產生另一個按鈕（#new_layer），允許用戶在「UL」創建一個列表元素，這最後一個按鈕也是一部分。

如果您只按一次#editProj按鈕，此功能就可以正常工作，但是如果您點擊兩次，然後單擊#new_layer按鈕，您將會添加兩次「li」元素。所以多少次點擊#editProj按鈕，多少次'li'元素被插入。

我想要了解這種行爲，但我似乎無法找到任何類似的貼在任何地方，所以如果任何人都可以引導我在正確的方向我非常感激。

乾杯！

Answer 1

您需要將on設置爲off，然後再次將其設置爲on。

讓它

projEditor.off('click', '#new_layer'); //this line is required to set on to off 
projEditor.on('click', '#new_layer', function(event) { 
       event.preventDefault(); 
       $('#layers').append('<li id="layer" name="layer'+layerCount+'">'+layerCount+'</li>'); 
       layerCount++; 
      }); 

Answer 2

projNav.one('click', '#editProj', function(event) { 

試試這個代碼。它允許一次點擊，並防止代碼處理雙擊和多次點擊。 請參閱下面的鏈接How to prevent a double-click using jQuery?以獲得更多的想法。 我認爲它會正常工作。