Question

我正在用jQuery创建一个动态列表。对于我添加到列表中的每个新列表项，我想创建一个编辑按钮，其类为＆＃34;编辑＆＃34;还有一个删除按钮，类为＆＃34;删除。＆＃34;

这是HTML中我想要实现的一个例子

cite

但是，当我添加新列表项时，我无法将正确的类添加到右键。这是我的代码：

    <li>vincent price<button class="edit">Edit</button><button 
    class="delete">Delete</button></li>

    <li><span>Peter Cushing</span><button class="edit">Edit</button>
    <button class="delete">Delete</button></li>

    <input type="text" class="enter">
    <button id="click">Click Here!</button>

显然，＆＃39; ul li：last-child＆＃39;选择器无法正常工作，因为一旦创建了新的列表项，它就会从旧的列表中删除按钮。但是我一直在试图弄清楚如何解决这个问题。谢谢你的帮助。

Answer 1

使用支持es6语法解决问题的变体之一

$("#click").on('click',(e) => {
     e.preventDefault();
     const entry = $(".enter").val();
     const template = `
      <li>
         <span>${entry}</span>
         <button class="edit">Edit</button>
         <button class="delete">Delete</button>
      </li>`;

      $('ul').append(template);
   });

Answer 2

为什么不把它全部放在一个不错的append标记中，而不是那个复杂的代码，如下所示：

$("#click").click(function() {
    var entry = $(".enter").val();
    $("ul").append("<li><span>" + entry + "</span><button class=\"edit\">Edit</button><button class=\"delete\">Delete</button></li>");
});

这应该可以满足您的需求。

Answer 3

创建按钮时添加类。那你应该没事。

修改

要附加按钮的副本，请使用jQuery clone方法。我还没有在这里使用它，但有一个可选的WithDataAndEvents参数可用于复制事件处理程序。我个人使用on

＆＃13;
＆＃13;
var editButton = $('<button />').text('edit').addClass('edit'); var deleteButton = $('<button />').text('delete').addClass('delete'); $("#click").click(function() { var entry = $(".enter").val() $("ul").append("<li><span>" + entry + "</span></li>") $(editButton.clone()).appendTo('ul li:last-child'); $(deleteButton.clone()).appendTo('ul li:last-child'); });
＆＃13;
.edit { color: green; } .delete { color: red; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul></ul> <button id="click">Click Me</button>
＆＃13;
＆＃13;
＆＃13;

使用jQuery向按钮添加单独的类

3 个答案: