问题 如何使用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>');
    });
};

9627
2017-09-25 17:40


起源

你能为它创造一个小提琴吗? - Sushanth --


答案:


如果我正确理解你的问题,我已经做了一个 小提琴 这有效地工作。这个问题与你如何分配事件处理程序有关,并且正如其他人所说的那样,你已经过了事件处理程序。目前的jQuery最佳实践是使用 on() 注册事件处理程序。这是jQuery文档的链接 on链接

您的原始解决方案非常接近,但您添加事件处理程序的方式有点令人困惑。不向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++;    
}

14
2017-09-25 18:04



好的,这似乎现在正在发挥作用。非常感谢!这非常有帮助。是的,问题的一部分是我没有完全理解实时功能。我将不得不再研究一下。谢谢你的建议。 - user1197728
别客气。我很高兴能帮忙。在注册事件处理程序时,jQuery最佳实践会一直在变化。它曾经是 live()然后就变成了 delegate() 现在是 on()。 - richoffrails
所以dom上的事件处理程序是侵入性的,但创建id来访问这些元素却不是。 id字符串和fn调用字符串之间的干扰有什么区别?这是2014年,我仍然没有得到它。 - Carlos Fontes


live function正在注册click事件处理程序。每次单击对象时都会这样做。因此,如果单击两次,则会为对象分配两个单击处理程序。您还在此处指定了一个点击处理程序:

onclick="feedback('the message html')";

然后单击处理程序通过分配另一个单击处理程序 live()

真的我认为你想做的是这样的:

function feedback(message)
{
    $('#feedback').remove();

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

好的,根据你的评论,尝试取出 onclick 的一部分 <a> 元素,而是把它放在一个 document.ready() 处理程序。

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

1
2017-09-25 17:46



这就是我试图开始的。问题在于删除不会带走第一反馈。这解决了奇怪的堆叠问题,但没有解决删除上一条消息的问题。这正是我的想法。 - user1197728
哦,我的意思是说谢谢,因为这似乎解释了为什么堆叠问题正在发生。 - user1197728
@ user1197728检查我的编辑 - Phillip Schmidt
我非常感谢Philip的帮助。不幸的是,我无法从按钮上删除点击,因为它是我们试图摆脱的遗留系统,它正在多个地方显示。在从旧到新的过渡中,我必须以“原样”的方式使其工作。 - user1197728
@ user1197728我建议和Richoffrails一样,你说他的工作:) - Phillip Schmidt


你在页面上有多个单选按钮吗?

因为我看到的是,当您单击单选按钮时,您将事件分配给页面上的所有单选按钮


0
2017-09-25 17:52



是。对不起,我应该把更多的HTML放了。 - user1197728
那是 你看到代码时看到了什么?不是多个嵌套的点击处理程序? :P - Phillip Schmidt


我会做的事情如下:

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

0
2018-06-22 13:20