如何使用Jquery删除追加的元素，为什么使用bind或live会导致元素重复

Question

如何使用Jquery删除追加的元素，为什么使用bind或live会导致元素重复

jqueryappendbindlive

17

我知道这个基本问题以前已经被问过了，但是我一定做错了什么。我知道一个附加的元素必须先绑定才能对其进行任何操作。然而，尽管我尝试了很多次，但我无法让它正常工作。

当人们点击单选按钮时，我会拉取一条消息并显示出来。每当我尝试绑定新元素时，它就会以奇怪的方式堆叠。它将开始堆叠元素。例如- [点击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>');
    });
};

- user1197728

你能为此创建一个 fiddle 吗？ - Sushanth --

5个回答

4

live函数用于注册一个点击事件处理程序。每次单击对象时，它都会执行此操作。因此，如果您单击两次，则将两个单击处理程序分配给该对象。此处还分配了一个单击处理程序：

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

然后，该点击处理程序通过live()分配另一个点击处理程序。

我认为你真正想做的是这样的：

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

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

根据您的评论，尝试删除元素中的onclick部分，取而代之的是将其放入document.ready()处理程序中。

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

- Phillip Schmidt

这就是我一开始尝试的。问题在于remove不会删除第一个反馈。这解决了奇怪的堆叠问题，但无法解决删除上一条消息的问题。不过这正是我想到的。 - user1197728

哦，我的意思是谢谢你，因为这似乎解释了为什么会出现堆叠问题。 - user1197728

我非常感谢Philip的帮助。不幸的是，我无法从按钮中删除on click事件，因为它是一个遗留系统，我们正在试图摆脱它，并且在多个地方显示。在从旧系统过渡到新系统时，我必须以“原样”的方式使其正常工作。 - user1197728

@user1197728，我建议的与Richoffrails所提出的相同，而你说他的方法有效 :) - Phillip Schmidt

0

我会这样做：

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

- Lucas S.

0

你可以使用replaceAll代替remove和append replaceAll

- Masoud

0

你的页面上有多个单选按钮吗？

因为我看到的是，当你点击一个单选按钮时，你把事件都分配给了页面上的所有单选按钮。

- Sushanth --

是的。抱歉，我应该将更多的HTML代码放上去。 - user1197728

你看到的只有代码本身？而没有那些嵌套的点击处理程序？ :P - Phillip Schmidt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- richoffrails · Accepted Answer

如果我理解你的问题正确，我制作了一个fiddle，这个fiddle可以正确地工作。这个问题出在你如何分配事件处理程序上，正如其他人所说，你覆盖了事件处理程序。当前jQuery最佳实践是使用on()来注册事件处理程序。这里是关于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++;    
}