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) {

試試這個代碼。 它允許單擊一次，並防止處理雙擊和多次單擊的代碼。 請參閱下面的鏈接如何防止使用jQuery雙擊？ 以獲得更多的想法。 我認為它將很好。