代码之家 › 专栏 › 技术社区 › Grizzly

jQuery从UL检索特定项时工作不正常

jquery-select2 html jquery javascript

Grizzly · 技术社区 · 7 年前

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

<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 .

当用户使用dropdownlist选择一个选项时,该选项将与旁边的按钮一起填充到无序列表中。

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 元素,我在同一个 锂 要素

4 回复 | 直到 7 年前

Chin Leung 7 年前

问题

每次更改第一个选择的值时,您都会触发该功能 testButton .remove-buttons 即使他们之前有过活动。

而不是绑定单击每次用户更改select时,您都可以将其绑定到父元素上,使事件绑定到动态创建的元素。

测试按钮 在您的 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/

Pedro Batista 7 年前

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

royal 7 年前

你需要 unbind 添加新单击事件之前的上一个单击事件:

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

krishnar 7 年前

因为每次发生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).on("click", ".remove-button", function() {
  alert($(this).parent().text());
});