如何使用Jquery删除附加元素以及绑定或活动导致元素重复的原因 [英] How to remove an appended element with Jquery and why bind or live is causing elements to repeat

问题描述

现在，我知道之前已经问过这个基本问题，但是我一定做错了.我知道必须对附加元素进行绑定，然后才能对其执行任何操作.但是，请尝试尝试，使我无法正常工作.

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.

当人们单击单选按钮时，我会显示一条消息并显示.每当我尝试绑定新元素时，它都会以奇怪的方式堆叠.它将开始堆叠元素.例如-[点击1]消息1，[点击2]消息1和2，依此类推.

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.

我尝试了很多不同的方法来绑定它.我的希望是删除将删除#feedback，然后创建并绑定下一条消息.我一定在做些非常错误的事情.我知道这与其他帖子非常相似，但是我浏览了所有这些帖子，却找不到足够清晰的答案来提供帮助.预先谢谢你.

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.

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>');
    });
};

推荐答案

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

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

您的原始解决方案非常接近，但是您添加事件处理程序的方式有点令人困惑.最好的做法是不向HTML元素添加事件.我建议阅读Unobsttrusive JavaScript.

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.

这是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删除附加元素以及绑定或活动导致元素重复的原因的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！