如何使用Jquery删除附加元素以及为什么绑定或生存会导致元素重复

前端之家收集整理的这篇文章主要介绍了如何使用Jquery删除附加元素以及为什么绑定或生存会导致元素重复前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
现在我知道这个基本问题之前已被问过,但我一定是做错了.我知道在我可以对它做任何事情之前必须绑定一个附加元素.但是,尝试我可能无法让它工作.

当人们点击收音机选择时,我正在显示一条消息并显示.当我尝试绑定新元素时,它会以奇怪的方式堆叠.它将开始堆叠元素.例如 – [单击1]消息1,[单击2]消息1和2,依此类推.

我已经尝试了一大堆不同的方法来绑定它.我希望删除删除#Feedback,然后创建并绑定下一条消息.我必须做一些非常错误的事情.我知道这与其他帖子非常相似,但我经历了所有这些帖子并且无法找到足够明确的答案来帮助.先谢谢你.

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

解决方法

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

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

这是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++;    
}

猜你在找的jQuery相关文章