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），允许用户在＆lt; ul＆＃39;中创建一个列表元素。这最后一个按钮也是。

的一部分

如果您只按一次#editProj按钮，这样可以正常工作，但是如果您单击它两次然后单击#new_layer按钮，您将获得＆＃39; li＆＃39;元素添加了两次。那么你多少次点击#editProj按钮，很多次就是＆＃39; li＆＃39;元素被插入。

我想了解这种行为，但我似乎无法在任何地方找到类似的东西，所以如果有人能引导我朝着正确的方向前进，我会非常感激。

干杯！

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?以获取更多信息。我认为它会正常工作。

Jquery在生成列表元素时点击奇怪的行为

2 个答案: