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?以获得更多的想法。 我认为它会正常工作。