点击后。一个函数被多次调用...为什么？

好的朋友。我需要你的想法。该代码有两个简单的操作。点击后第一个动作添加ADD。第二个动作用任意数字点击X.现在调用第二个动作。代码应该只打印一次！什么工人不读有几次呼叫！谁能解释为什么？点击后。一个函数被多次调用...为什么？

我拿着相同的代码....与另一个HTML代码与3 DIV 已经存在。代码工作正常。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 

 
    $(".btn_x").on("click", function() { 
 
     console.log($(this).html()); 
 
    }) 
 
    }) 
 
})

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

来源

2017-05-26 L.Shabtai

我很久没有使用jquery，但是如果我没有弄错，每次都会被调用，它会为事件添加一个新的回调函数。尝试一个，而不是：http://api.jquery.com/one/ –

的问题是，您要添加新的事件侦听器，每次单击#add。相反，您可以仅监听父元素上的事件并从子元素捕获元素。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 
    }); 
 
    
 
    // Listen to events on the parent element 
 
    $("#items") 
 
    // But only capture events from child elements with .btn_x 
 
    .on("click", ".btn_x", function() { 
 
     console.log($(this).html()); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

你可以认为它是这样的：每一个事件发生在一个.btn_x时间，它会告诉#items了。每当#items听到它，它就可以让你处理事件，就像直接听.btn_x一样。

您的方法存在的问题是您每次点击#add时，您都在说“你们每个人都是.btn_x's！这是你的新事件处理程序！”。

来源

2017-05-26 18:24:47

虽然他没有点击'＃items'元素，他点击了＃＃添加按钮。 '＃items'不是这里的父元素 – taylorc93

@ taylorc93阅读问题的描述。问题是，当他们点击“X1”，“X2”等时，他们会得到多个响应。这是因为'＃add'点击处理程序添加了不应该在那里的额外事件处理程序。在'＃items'上处理事件允许它们从* any *'.btn_x'元素捕获事件，而不直接绑定它。 –

谢谢。答案很好解释！只需简短点即可！谢谢！ –

您正在为每个btn_x项目创建一个侦听器，而不是仅将侦听器添加到新创建的项目。尝试改变类名像btn_1，btn_2等：

var count = 1; 
$(document).ready(function() { 
    $("#add").on("click", function() { 
    var buttonClass = ".btn_" + count; 
    $("#items").append('<div><input/><button class="' + buttonClass + '">X' + count + '</button></div></br>'); 
    count++; 

    $(buttonClass).on("click", function() { 
     console.log($(this).html()); 
    }) 
    }) 
})

来源

2017-05-26 18:24:57 taylorc93

谢谢你试图回复。但我不想改变班级。我需要同班同学。 –

我不知道你在问什么，但是这可能会有所帮助。

var count = 1; 
 
$(document).ready(function() { 
 
    $("#add").on("click", function() { 
 
    $("#items").empty().append('<div><input/><button class="btn_x">X' + count + '</button></div></br>'); 
 
    count++; 
 
    }) 
 
    $(".btn_x").on("click", function() { 
 
    console.log($(this).html()); 
 
    }) 
 
})

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<button id="add">Add</button> 
 
<div id="items"></div>

来源

2017-05-26 18:29:38 nicokant

他们不想只有一个项目，他们想要多个项目。这也不能正确处理'.btn_x'绑定。 –

中有＃将或#item的情况下，两个人通话。你的监听器函数调用它们两个。当你只想调用一个时。必须再次检查您的代码。我希望你明白我的观点。

来源

2017-05-26 18:53:35

点击后。一个函数被多次调用...为什么？

回答

相关问题