Question

我有一个JQuery可排序，每个项目都包含一个按钮。在页面顶部，我有一个添加按钮，可以将项目添加到可排序。我正在尝试对每个可排序的按钮进行编程，以使用自动完成中当前用户输入的值（也在页面顶部）替换该特定项目上的字符串。这是我的代码：

$(".addButton").click(function(e) {
e.preventDefault();
// set var item to be the string inputted by the user
var item = $("input[name='inputItem']").val(); //where 'inputItem' is the name of the <input>
// parses input string, splitting at commas into liArray containing substrings as elements
var liArray = item.split(", ");
// for loop to add each brew to the sortable list (length-1 because last element in array is empty string)
for (var i = 0; i < liArray.length-1; i++) {
    // sets var $li to the string in the ith index of liArray
    var $li = $("<li class='ui-state-default'/>").text(liArray[i]).append('<button class="replaceButton">Replace</button>');

    // adds var $li to gui
    $("#sortable").append($li);
};

$("#sortable").sort();

// refreshes the page so var $li shows up
$("#sortable").sortable("refresh");

}）;

既然我添加的每个项目都有一个class =“replaceButton”的按钮，我想我可以在我的.js中声明这样的内容：

$(".replaceButton").click(function() {
    // set var item to be the string inputted by the user
    var item = $("input[name='inputItem']").val();  //where 'inputItem' is the name of the <input>
    // I DON'T KNOW WHAT TO DO HERE
});

我不知道从那里去哪里，因为我不知道如何访问特定项目的字符串。我会用“这个”吗？是否更容易而不是只更换字符串，我删除了特定的项目并在其位置创建了一个新项目？感谢您的任何建议或答案！

Answer 1

因为您知道您的按钮是li的一部分，所以您可以访问以下文字：

// mind the dynamic event binding!
$('#sortable').on('click', ".replaceButton", function(e) {
    e.preventDefault();

    var item = $("input[name='inputItem']").val();

    $(this).parent()
          .text(item)
          .append( $(this).clone() );
});

当你想保留它时，你必须附加你的replaceButton的另一个实例并且因为您动态添加按钮，请注意事件绑定中的更改。我将click事件绑定到一个持久的容器，并动态绑定到.replaceButton的所有实例，即使它们尚不存在。

如何使按钮在JQuery可排序的项目上正常运行？

1 个答案: