JQuery - 事件委托(delegate) - 我的代码中发生了什么？-6ren

JQuery - 事件委托(delegate) - 我的代码中发生了什么？

转载作者：行者123 更新时间：2023-12-01 08:30:18

我已经阅读了有关事件委托(delegate)的尽可能多的内容，但我无法弄清楚为什么我的代码会这样运行。页面加载时，所有检查按钮都可以正常工作(在 2 个类别之间切换)。每当我将新商品添加到购物 list 时，复选按钮仅适用于该新商品。如果我添加第二个新项目，则复选按钮适用于该新项目(即 4 个原始项目)，但不适用于第一个新项目。如果我添加更多项目，它将不适用于前一个项目，但适用于该项目之前的所有项目。

如何让复选按钮适用于所有项目？

HTML...

<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" id="shopping-list-entry" placeholder="e.g., broccoli">
      <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>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

CSS...

* {
    box-sizing: border-box;
  }

  body {
    font-family: 'Roboto', sans-serif;
  }

  button, input[type="text"] {
    padding: 5px;
  }

  button:hover {
    cursor: pointer;
  }

  #shopping-list-item {
    width: 250px;
  }

  .container {
    max-width: 600px;
    margin: 0 auto;
  }

  .shopping-list {
    list-style: none;
    padding-left: 0;
  }

  .shopping-list > li {
    margin-bottom: 20px;
    border: 1px solid grey;
    padding: 20px;
  }

  .shopping-item {
    display: block;
    color: grey;
    font-style: italic;
    font-size: 20px;
    margin-bottom: 15px;
  }

  .shopping-item__checked {
    text-decoration: line-through;
  }

JS...

//Make the Check Button functional
function checkButton() {
    $(".shopping-item-toggle").on("click", "span", function() {
    $(this).closest("li").find(".shopping-item").toggleClass("shopping-item__checked");
  })};
checkButton();

//Make the Delete Button functional
function delButton() {
    $(".shopping-item-delete").on("click", function() {
    $(this).parent().parent().remove();
  })};
delButton();

  //Create a variable called buttons to add the 2 buttons in function below
  let buttons = "<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>";

  //Add new Item to List
  $("#js-shopping-list-form").submit(function() {
    let item = $("#shopping-list-entry").val();
    if (item != "") { //As long as the input has text in it, run the function below
    $(".shopping-list").append("<li>" + "<span class='shopping-item'>" + item + "</span>" + buttons + "</li>");
    event.preventDefault();
    checkButton();//Make the check button functional
    delButton();//Make the delete button functional
    } else { //if NO text is in the input, show this alert
      alert("Must enter an item name!");
    }
  });

最佳答案

每当您添加新项目时，新的点击处理程序都会绑定(bind)到所有项目。这意味着页面上存在的项目可能会获得两个或更多重复的处理程序。如果两个处理程序绑定(bind)到一个项目，第一个处理程序将 toggleClass 打开“已检查”类，第二个处理程序将立即关闭该类。

要使用事件委托(delegate)，我建议仅绑定(bind)处理程序一次，并将它们绑定(bind)到页面上始终存在的祖先。

例如:

// Bind "check" and "delete" handlers to the ".shopping-list" ancestor.

$(".shopping-list").on("click", ".shopping-item-toggle span", function() {
  $(this).closest("li").find(".shopping-item").toggleClass("shopping-item__checked");
});

$(".shopping-list").on("click", '.shopping-item-delete', function() {
  $(this).parent().parent().remove();
});


// Create a variable called buttons to add the 2 buttons in function below
let buttons = "<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>";

//Add new Item to List
$("#js-shopping-list-form").submit(function(event) {
  event.preventDefault();
  let item = $("#shopping-list-entry").val();
  if (item != "") { // If the input has text in it, add the new item
    $(".shopping-list").append("<li>" + "<span class='shopping-item'>" + item + "</span>" + buttons + "</li>");
  } else { //if NO text is in the input, show this alert
    alert("Must enter an item name!");
  }
});

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list>li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item__checked {
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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" id="shopping-list-entry" placeholder="e.g., broccoli">
    <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>

<小时/>

以下演示了添加新项目后如何触发多个处理程序:

//Make the Check Button functional
function checkButton() {
  $(".shopping-item-toggle").on("click", "span", function() {
    let $item = $(this).closest("li").find(".shopping-item");
    console.log('Check Handler ' + ($item.hasClass('shopping-item__checked') ? 'OFF' : 'ON'));
    $item.toggleClass("shopping-item__checked");
  })
};
checkButton();

//Make the Delete Button functional
function delButton() {
  $(".shopping-item-delete").on("click", function() {
    console.log('Delete Handler');
    $(this).parent().parent().remove();
  })
};
delButton();

//Create a variable called buttons to add the 2 buttons in function below
let buttons = "<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>";

//Add new Item to List
$("#js-shopping-list-form").submit(function(e) {
  event.preventDefault();
  let item = $("#shopping-list-entry").val();
  if (item != "") { //As long as the input has text in it, run the function below
    $(".shopping-list").append("<li>" + "<span class='shopping-item'>" + item + "</span>" + buttons + "</li>");
    checkButton(); //Make the check button functional
    delButton(); //Make the delete button functional
  } else { //if NO text is in the input, show this alert
    alert("Must enter an item name!");
  }
});

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

button,
input[type="text"] {
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

#shopping-list-item {
  width: 250px;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.shopping-list {
  list-style: none;
  padding-left: 0;
}

.shopping-list>li {
  margin-bottom: 20px;
  border: 1px solid grey;
  padding: 20px;
}

.shopping-item {
  display: block;
  color: grey;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 15px;
}

.shopping-item__checked {
  text-decoration: line-through;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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" id="shopping-list-entry" placeholder="e.g., broccoli">
    <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>

关于JQuery - 事件委托(delegate) - 我的代码中发生了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61198095/

文章推荐： azure - 在两个 Azure CSP 订阅之间迁移 Azure DevOps

文章推荐： ruby-on-rails - 在 Intranet/LAN 上部署 Production Rails 应用程序

objective-c - 有没有更好的办法？委托(delegate) -> 委托(delegate) -> 委托(delegate)
我有一个加载 View 的 View ，需要将 View 推送到主导航 Controller 。我已经为每个 View 设置了一个委托(delegate)，并且基本上使我的调用沿着“链”返回到主导航
ios - UITableView 委托(delegate)触发 NSURLConnection 委托(delegate)
我通过 NSURLConnction 从服务器获取数据，并希望从获取的数组中填充表格 View 。数据出现在 NSURLConnection 委托(delegate)方法的日志中，但我意识到 numb
ios - 委托(delegate)内的 Obj-C 委托(delegate)
我已经将我用作标题 View 的 View 子类化，它里面有一些按钮委托(delegate)，它工作得很好。但是，我在 viewController 上方展示了一个 modalViewControl
c# - 委托(delegate) - 委托(delegate)返回类型是否也必须与其委托(delegate)的方法相匹配？
我希望这听起来像是一个显而易见的问题，但是委托(delegate)返回类型是否也必须与其委托(delegate)的方法的返回类型相匹配？ EG，像这样: public static void Save
Kotlin 委托(delegate)与 `by` 但创建委托(delegate) *inside* 委托(delegate)
我想使用 Kotlin 委托(delegate)，但我不想在委托(delegate)人之外创建委托(delegate)。委托(delegate)的所有示例都如下所示: interface Worker
iphone - 未调用 UIImagePickerController 委托(delegate)方法(委托(delegate)设置为自身)
我有一个问题: - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInf
swift - 委托(delegate)(创建 sideMenu 时，委托(delegate)？返回 nil)
伙计们。我正在寻求帮助。这似乎是一个非常简单的任务，但我可以解决一整天。我正在尝试使用容器 View 创建侧面菜单。当用户按下“更多”按钮(barButtonItem)时，整个 View 向右滑动并出
ios - 将 UIWebView 委托(delegate)迁移到 WKWebView 委托(delegate)方法
我正在努力将 UIWebView 迁移到 WKWebView。我已经更改了所有委托(delegate)方法。我需要 WKWebView 委托(delegate)方法等于下面的 UIWebView 委托
vb.net - Vb.net 委托(delegate)是强类型的吗/为什么编译器接受这个 'loosely typed' 委托(delegate)？
我正在学习 VB.NET 中的委托(delegate)，但对委托(delegate)类型感到困惑。在阅读有关委托(delegate)的内容时，我了解到委托(delegate)是一种数据类型，可以引用具
ios - 我不明白为什么 Objective-C 委托(delegate)函数可以工作而 Swift 委托(delegate)函数会崩溃。你能给我解释一下吗？
我有一个用 Objetive-C 构建的框架。该框架用于连接蓝牙设备并与之交互。在演示代码中，Objetive-C 委托(delegate)函数如下所示。演示代码由框架创建者提供。 -(void)b
ios - 即使使用 Delegate=self 也不会调用 WebView 委托(delegate)并且还实现了 UIWebView 委托(delegate)协议(protocol)
//NewCharts.h #import @interface NewCharts : UIViewController @property(nonatomic,retain)IBOutlet U
c# - 它有什么区别 - 使用 Task.Run 运行 'async' Action 委托(delegate)(与默认 Action 委托(delegate)相比)？
我正在努力了解 async/await 并认为我确实了解有关用法的一些事情。但仍然不太清楚在下面的场景中实际好处是什么。查看 Task.Run 用法。第一种方法使用普通委托(delegate)并使用
OpenID 委托(delegate)
我已经尝试了在我的网站上使用 openID 委托(delegate)的所有可能选项，但没有一个方法对我有用。我的 HTML 文件的 head 部分有“link rel”标签。我在 HTML 文件的
swift 委托(delegate)？
如何快速创建一个委托(delegate)，即 NSUserNotificationCenterDelegate？最佳答案这里有一些关于两个 View Controller 之间委托(delegat
datasource - NSComboBox 委托(delegate)
我有一个带有数据源的 NSComboBox，当您单击三角形并通过单击它选择其中一个项目时，它可以完美运行。但是，我还希望它允许用户在框中键入以使用自动完成来选择名称。目前，当用户键入时，我希望选择的项
.net - 委托(delegate)签名不匹配时没有错误
我在代码中定义了以下类和委托(delegate)(为简洁起见，剪掉了许多其他行)。 Public Delegate Sub TimerCallback(canceled As Boolean) Pub
ansible 委托(delegate)给其他主机
我使用 ansible 2.1 并且我想使用 delegate_to 向一组主机运行命令。我使用 localhost 作为主机参数，并且我想将“touch”命令委托(delegate)给两个 cls
c++ - 委托(delegate)构造函数和引用参数
我想通过重载为我的类实现几个构造函数。据我了解，遵循 DRY 原则的惯用方式是使用一种称为委托(delegate)构造函数的功能。我也看到了关于在任何地方使用引用参数并不惜一切代价避免使用指针的想法，
.net - 委托(delegate)们会导致内存泄漏吗？
代表们会导致内存泄漏吗？我的意思是，例如如果一个类A包含一个ADelegate，并且后者指向BMethod(属于B类)，这可以防止GC收集A类或B类吗？如果是这样，我们如何“释放”代表(设置ADe
wpf - 委托(delegate)命令和路由命令
委托(delegate)命令和路由命令有什么区别？我读了一些文章说在 MVVM 上使用委托(delegate)命令而不是路由命令。那么当我们使用 MVVM 时，Delegate Command 相

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

JQuery - 事件委托(delegate) - 我的代码中发生了什么？