[英]Jquery on click strange behavior when generating list elements
I will post the code first and then try to go into details about my issue. 我将首先发布代码,然后尝试详细介绍我的问题。
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);
});
});
So basically what we have here is a button (#editproj) which when clicked it will generate another button (#new_layer) that allows the user to create one list element in the 'ul' that this last button is also a part of. 因此,基本上我们这里是按钮(#editproj),单击该按钮将生成另一个按钮(#new_layer),允许用户在“ ul”中创建一个列表元素,该最后一个按钮也是该元素的一部分。
This works fine if you press the #editProj button only once, however if you click on it twice and then click the #new_layer button you will get the 'li' element added twice. 如果仅按一次#editProj按钮,则此方法效果很好,但是,如果单击两次,然后单击#new_layer按钮,则将两次添加'li'元素。 So how many times you click the #editProj button, that many times the 'li' element gets inserted.
因此,您单击#editProj按钮的次数,即多次插入“ li”元素。
I`d like to understand this behavior but I can't seem to find something similar posted anywhere, so if anyone could steer me in the right direction i'd very much appreciate it. 我想了解这种行为,但是似乎找不到在任何地方发布的类似内容,因此,如果有人可以引导我朝正确的方向前进,我将非常感激。
Cheers! 干杯!
you need to set the on
to off
before setting it to on
again. 您需要设置
on
,以off
其设置为之前on
一次。
Make it 做了
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++;
});
projNav.one('click', '#editProj', function(event) {
Try this code. 试试这个代码。 It allows one click and prevent the processing of codes for double click and multiple clicks.
它允许单击一次,并防止处理双击和多次单击的代码。 Refer the below link How to prevent a double-click using jQuery?
请参阅下面的链接如何防止使用jQuery双击? to get more idea.
以获得更多的想法。 I think it will work fine.
我认为它将很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.