如何使用 Jquery 删除附加元素以及为什么 bind 或 live 导致元素重复 [英] How to remove an appended element with Jquery and why bind or live is causing elements to repeat

问题描述

现在我知道以前有人问过这个基本问题，但我一定是做错了什么.我知道必须先绑定附加元素，然后才能对其进行任何操作.但是，尽我所能，我无法让它工作.

我正在拉入一条消息并在人们单击收音机选择时显示.每当我尝试绑定新元素时，它都会以奇怪的方式堆叠.它将开始堆叠元素.例如- [点击 1] 消息 1，[点击 2] 消息 1 和 2 等等.

我尝试了很多不同的方法来绑定它.我的希望是 remove 会去除 #feedback，然后创建并绑定下一条消息.我一定是做错了什么.我知道这与其他帖子非常相似，但我浏览了所有帖子，但找不到足够明确的答案来提供帮助.提前致谢.

HTML

<ul><li><input id="answer" type="radio" onclick="feedback('THE MESSAGE HTML')"><label>Label</label>

JavaScript:

功能反馈(message){$('#answer').live('click', function(){$('#feedback').remove();});$('#answer').live('click', function(){$('.answers').append('<div id="feedback">'+message+'</div>');});};

解决方案

如果我正确理解你的问题，我已经做了一个 fiddle 可以正常工作.这个问题与您如何分配事件处理程序有关，正如其他人所说，您已经过度使用事件处理程序.当前的 jQuery 最佳实践是使用 on() 来注册事件处理程序.这是关于 on 的 jQuery 文档的链接:link

您最初的解决方案非常接近，但您添加事件处理程序的方式有点令人困惑.不向 HTML 元素添加事件被认为是最佳实践.我建议阅读 Unobtrusive JavaScript.

这是 JavaScript 代码.我添加了一个计数器变量，以便您可以看到它是否正常工作.

$('#answer').on('click', function() {反馈('嘿那里')；});无功计数器 = 0;功能反馈(消息){$('#feedback').remove();$('.answers').append('<div id="feedback">' + message + ' ' + counter + '</div>');计数器++；}

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.

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.

The HTML

<div class="answers">
    <ul>
        <li>
            <input id="answer" type="radio" onclick="feedback('THE MESSAGE HTML')"><label>Label</label>
        </li>
    </ul>
</div>

JavaScript:

function feedback(message)
{
    $('#answer').live('click', function()
    {
        $('#feedback').remove();
    });

    $('#answer').live('click', function()
    {
        $('.answers').append('<div id="feedback">'+message+'</div>');
    });
};

解决方案

If I understand your question correctly, I've made a fiddle that 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

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.

Here's the JavaScript code. I added a counter variable so you can see that it is working correctly.

$('#answer').on('click', function() {
  feedback('hey there');
});

var counter = 0;

function feedback(message) {

  $('#feedback').remove();

  $('.answers').append('<div id="feedback">' + message + ' ' + counter + '</div>');

  counter++;    
}

这篇关于如何使用 Jquery 删除附加元素以及为什么 bind 或 live 导致元素重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！