jquery - 如何使用 Jquery 删除附加元素以及为什么 bind 或 live 导致元素重复

Question

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

当人们单击收音机选择时，我正在拉入一条消息并显示。每当我尝试绑定新元素时，它都会以奇怪的方式堆叠。它将开始堆叠元素。例如- [单击 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>');
    });
};

Answer 1

如果我正确理解了您的问题，我已经制作了一个可以正常工作的小提琴。这个问题与您如何分配事件处理程序有关，并且正如其他人所说，您已经超越了事件处理程序。当前的 jQuery 最佳实践是用于on()注册事件处理程序。这是 jQuery 文档的链接on：link

您最初的解决方案非常接近，但您添加事件处理程序的方式有点令人困惑。不向 HTML 元素添加事件被认为是最佳实践。我建议阅读 Unobtrusive 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++;    
}

Answer 2

该live函数正在注册一个单击事件处理程序。每次单击对象时都会这样做。因此，如果您单击它两次，则将两个单击处理程序分配给该对象。您还在这里分配了一个点击处理程序：

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

Answer 3

页面上是否有多个单选按钮..

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

Answer 4

您可以使用 replaceAll 而不是 remove 并附加 replaceAll

Answer 5

我会做类似的事情：

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