如何使用 Jquery 删除附加元素以及为什么 bind 或 live 导致元素重复
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12588260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove an appended element with Jquery and why bind or live is causing elements to repeat
提问by user1197728
Now I know this basic question has been asked before, but I must be doing something wrong. I know that an appended element must bound before I can do anything to it. However, try as I might I can't get it to work.
现在我知道以前有人问过这个基本问题，但我一定是做错了什么。我知道必须先绑定附加元素，然后才能对其进行任何操作。但是，尽我所能尝试我无法让它工作。
I am pulling in a message and displaying when people click a radio select. When ever I try to bind the new element, it stacks in odd ways. It will start to stack the elements. eg- [Click 1]message 1, [Click 2] message 1 and 2 and so on.
当人们单击收音机选择时，我正在拉入一条消息并显示。每当我尝试绑定新元素时，它都会以奇怪的方式堆叠。它将开始堆叠元素。例如- [单击 1] 消息 1、[单击 2] 消息 1 和 2 等等。
I have tried a whole bunch of different ways to bind it. My hope was the remove would strip #feedback and then create and bind the next message. I must be doing something terribly wrong. I know this is very similar to other posts, but I went through all of them and was not able to find a clear enough answer to help. Thank you in advance.
我尝试了很多不同的方法来绑定它。我希望 remove 会去除 #feedback，然后创建并绑定下一条消息。我一定是做错了什么。我知道这与其他帖子非常相似，但我浏览了所有帖子，但找不到足够明确的答案来提供帮助。先感谢您。
The HTML
HTML
<div class="answers">
<ul>
<li>
<input id="answer" type="radio" onclick="feedback('THE MESSAGE HTML')"><label>Label</label>
</li>
</ul>
</div>
JavaScript:
JavaScript：
function feedback(message)
{
$('#answer').live('click', function()
{
$('#feedback').remove();
});
$('#answer').live('click', function()
{
$('.answers').append('<div id="feedback">'+message+'</div>');
});
};
回答by richoffrails
If I understand your question correctly, I've made a fiddlethat has this working correctly. This issue is with how you're assigning the event handlers and as others have said you have over riding event handlers. The current jQuery best practice is to use on()to register event handlers. Here's a link to the jQuery docs about on: link
如果我正确理解你的问题，我已经制作了一个可以正常工作的小提琴。这个问题与您如何分配事件处理程序有关，正如其他人所说，您已经过度使用事件处理程序。当前的 jQuery 最佳实践是on()用于注册事件处理程序。这是 jQuery 文档的链接on：link
Your original solution was pretty close but the way you added the event handlers is a bit confusing. It's considered best practice to not add events to HTML elements. I recommend reading up on Unobstrusive JavaScript.
您的原始解决方案非常接近，但您添加事件处理程序的方式有点令人困惑。不向 HTML 元素添加事件被认为是最佳实践。我建议阅读 Unobtrusive JavaScript。
Here's the JavaScript code. I added a counter variable so you can see that it is working correctly.
这是 JavaScript 代码。我添加了一个计数器变量，以便您可以看到它正常工作。
$('#answer').on('click', function() {
feedback('hey there');
});
var counter = 0;
function feedback(message) {
$('#feedback').remove();
$('.answers').append('<div id="feedback">' + message + ' ' + counter + '</div>');
counter++;
}
回答by Phillip Schmidt
The livefunction is registering a click event handler. It'll do so every time you click the object. So if you click it twice, you're assigning two click handlers to the object. You're also assigning a click handler here:
该live函数正在注册一个点击事件处理程序。每次单击对象时它都会这样做。因此，如果您单击它两次，就会为该对象分配两个单击处理程序。您还要在此处分配点击处理程序：
onclick="feedback('the message html')";
And then that click handler is assigning another click handler via live().
然后该点击处理程序通过live().
Really what I think you want to do is this:
真的，我认为你想做的是：
function feedback(message)
{
$('#feedback').remove();
$('.answers').append('<div id="feedback">'+message+'</div>');
}
Ok, per your comment, try taking out the onclickpart of the <a>element and instead, putting this in a document.ready()handler.
好的，根据您的评论，尝试取出元素的onclick一部分，<a>而是将其放入document.ready()处理程序中。
$('#answer').live('click',function(){
$('#feedback').remove();
$('.answers').append('<div id="feedback">'+message+'</div>');
});
回答by Sushanth --
Do you have multiple Radio Buttons on the page..
页面上是否有多个单选按钮..
Because what I see is that you are assigning the events to all the radio button's on the page when you click on a radio button
因为我看到的是，当您单击单选按钮时，您正在将事件分配给页面上的所有单选按钮
回答by Lucas S.
I would do something like:
我会做这样的事情：
$(documento).on('click', '#answer', function() {
feedback('hey there');
});
回答by Masoud
you could use replaceAll instead of remove and append replaceAll
您可以使用 replaceAll 而不是 remove 并附加 replaceAll
