Question

我无法弄清楚我和Jquery有过两个问题。

删除按钮有效，但不适用于新添加的项目。仅限原本在那里的物品。防爆。牛奶，面包。牛奶和面包例如最初来自html，并具有相同的按钮。删除按钮适用于那些li，但是从提交框中新添加的li不起作用，并且按钮类甚至不能应用，因为新附加的div上的按钮之间没有间距。
< / LI>
用于添加检查类的toggleClass不会切换。 0错误。无论我用什么，我都无法切换。问题是它应该添加一个strikethrough（'shopping-item__checked'）的类，并且不会在数小时后试图找出它。

这是一个初学者问题我敢肯定。谢谢。这是完整项目的链接： https://i.stack.imgur.com/2H3mV.png https://github.com/Masonwharr/shoppinglist/tree/master/Shopping-List

    $(document).ready(function() {
      $('#js-shopping-list-form').submit(function(event) {
        event.preventDefault();
        var inputfield = $('#entry').val();
        console.log(inputfield);
        $('.shopping-list').append('<li>  <span class="shopping-item">' + inputfield + '</span>' + '<div class="shopping-item-controls">' + '<button class="shopping-item-toggle"><span class="button-label">check</span></button>' + '<button class="shopping-item-delete"><span class="button-label">delete</span></button>' + '</div></li>');
        // This is incorrect, and adds an outside empty box. $('.shopping-list').append('<div class="shopping-item-controls"> <button class="shopping-item-toggle">' + '</button> </div>');
        //$('inputfield').appendTo('body').addClass('.shopping-item'); 
      });


      $('.shopping-item-toggle').on("click", function() {
        $(this).closest('span', '.shopping-item').toggleClass('shopping-item__checked');
      });


      $('.shopping-item-delete').mousedown(function(event) {
        var inputfield = $('#entry').val();
        event.preventDefault();
        $(this).parent('div').parent('li').remove();
      });
    });

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Shopping List</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="js/script.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="CSS/styles.css">
</head>

<body>
  <div class="container">
    <h1>Shopping List</h1>

    <form id="js-shopping-list-form">
      <label for="shopping-list-entry">Add an item</label>
      <input type="text" name="shopping-list-entry" placeholder="e.g., broccoli" id="entry">
      <button type="submit">Add item</button>
    </form>

    <ul class="shopping-list">
      <li>
        <span class="shopping-item">apples</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">oranges</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item shopping-item__checked">milk</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
      <li>
        <span class="shopping-item">bread</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
    </ul>
  </div>

</body>

</html>

`

Answer 1

jQuery不会在页面上为动态创建的元素注册事件处理程序。所以你可以做的是在父静态div上放置一个事件监听器（在你的情况下为shopping-list）。

我们的想法是将事件委托给该包装器，而不是直接在动态元素上绑定处理程序。

所以，这可以解决删除问题：

$(".shopping-list").on("click", ".shopping-item-delete", function(event) {
    var inputfield = $('#entry').val();
    $(this).parent('div').parent('li').remove();
    event.preventDefault();
});

您可以查看此JSFiddle - https://jsfiddle.net/3a6ddcd7/

编辑：

JSFiddle已经更新了检查工作，这是改变：

$('.shopping-item-toggle').on("click", function() {
    $(this).closest('li').children().first().toggleClass('shopping-item__checked');
});

希望这有帮助！

toggleClass，点击按钮删除li

1 个答案: