Question

我有一个下拉列表和一个无序列表：

<select id="MySelect">
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

<ul id="MyUL"></ul>

我的下拉列表正在使用Select2。

当用户使用下拉列表选择一个选项时，该选项将被填充到无序列表中，旁边还有一个按钮。

的jQuery

$("#MySelect").on("select2:select", function(evt){
    $("#MyUL").append("<li>" + evt.params.data.text + "<input type='button' class='btn btn-default btn-xs remove-button' style='margin-left:56%;' value='x' /></li>");

    testButton(); // explained below
});

由于用户可以将内容添加到列表中，我希望他们能够从列表中删除项目，这就是我被困住的地方。

我有一个名为testButton

的函数

function testButton() {
    $(".remove-button").on("click", function() {
        alert($(this).parent().text()); // testing this out
    });
}

当用户从下拉列表中选择2个选项并将这些选项放入无序列表时，会发生什么情况..如果我点击第一个元素的按钮，我会收到两次警报......依此类推......

这是JSFiddle。

如何删除我在同一个li元素中点击按钮的li元素？

Answer 1

问题

每当您更改第一个选择的值时，您触发的函数testButton将绑定.remove-buttons上的点击事件，即使他们之前有事件。

解决方案

每次用户更改select时，都不会绑定.remove-buttons上的点击，而是可以将其绑定到父元素上，以使事件绑定到动态创建的元素。

为此，请将testButton功能移至select2:select活动之外。

testButton();

$("#MySelect").on("select2:select", function(evt){
    $("#MyUL").append("<li>" + evt.params.data.text + "<input type='button' class='btn btn-default btn-xs remove-button' style='margin-left:56%;' value='x' /></li>");
});

然后更新你的函数以将事件绑定在正文上。

function testButton() {
    $("body").on("click", ".remove-button", function() {
        alert($(this).parent().text());
    });
}

演示

这里有更新的小提琴：https://jsfiddle.net/3xxbpg44/17/

Answer 2

您的活动被多次调用，因为每次创建按钮时，您都会为所有.remove-button元素创建新的事件绑定。

以下代码使用了一些对象，并完全删除了testButton的必要性：

$("#MySelect").select2();

$("#MySelect").on("select2:select", function(evt) {

  // Creating jQuery objects separately
  var item = $("<li>" + evt.params.data.text + "</li>");
  var button = $("<input type='button' class='btn btn-default btn-xs remove-button' style='margin-left:56%;' value='x' />");

  // Append button to item and item to UL
  item.append(button);
  $("#MyUL").append(item);

  // Creating event for button
  button.on("click", function() {
    $(this).unbind();          // Unbinding event to prevent clogging
    $(this).parent().detach(); // Removing list item from its parent
  });
});

Answer 3

在添加新的点击事件之前，您需要unbind：

function testButton() {
    $(".remove-button").unbind("click").on("click", function() {
        alert($(this).parent().text());
    });
}

Answer 4

为什么会这样？

因为每次select2更改事件发生时都调用事件函数。这是不好的做法。

首先从select2 select事件中删除对testButton的调用。否则每次select2更改将创建重复事件，因此您将看到那些警报

$("#MySelect").on("select2:select", function(evt){
  $("#MyUL").append("<li>" + evt.params.data.text + "<input type='button' class='btn btn-default btn-xs remove-button' style='margin-left:56%;' value='x' /></li>");

//testButton(); remove this.
});

- 直接在document上写下这样的删除事件。这将确保动态创建的元素可以与事件绑定

$(document).on("click", ".remove-button", function() {
  alert($(this).parent().text());
});

jQuery从UL检索特定项目无法正常工作

4 个答案:

问题

解决方案

演示