时间戳

首页 > 解决方案 > jQuery .click 与 .change

jquery - jQuery .click 与 .change

问题描述

我刚刚开始学习 Javascript 和 jQuery（1 天！）。我昨天遇到了一个问题，我最终解决了，但不知道为什么改变会奏效。

TLDR；在 jQuery 中，为什么不.change通过 id 标签触发切换/复选框.click？

下面的详细解释：

我希望了解原因并找出我所做的是否真的是解决我遇到的问题的正确方法。

我正在尝试创建一个可以打开和关闭的项目列表，并通过 AJAX 更新后端。当我建立我的两个示例列表时，当我单击一个按钮时，它会切换所有按钮。

我通过类调用（不是唯一的），所以我将每个移动到一个唯一的 id，然后 jQuery.click函数停止工作。在把我的头撞到墙上几个小时后，我变成.click了.change- 它开始工作了。

问题：为什么.change使用 id 标签触发正常.click而不触发？

为什么这不能按原样工作？

  $(document).ready(function() {
    $('#toggle1').click(function() {
      var current_status = $('#engineer1').text();
      $('#engineer1').html('Changed 1');
    });
  });

  $(document).ready(function() {
    $('#toggle2').click(function() {
      var current_status = $('#engineer2').text();
      $('#engineer2').html('Changed 2');
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input id="toggle1" type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
<div id="engineer1">Should Change</div>

<input id="toggle2" type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
<div id="engineer2">Should Change</div>

标签： jquery

解决方案

您的引导插件以某种方式覆盖了您的命令。我相信 .click 事件正在改变您的切换以某种方式执行，而不是您的附加功能。

  $(document).ready(function() {
    $('#toggle1').click(function() {
      var current_status = $('#engineer1').text();
      $('#engineer1').html('Changed 1');
    });
  });

  $(document).ready(function() {
    $('#toggle2').click(function() {
      var current_status = $('#engineer2').text();
      $('#engineer2').html('Changed 2');
    });
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input id="toggle1" type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
<div id="engineer1">Should Change</div>

<input id="toggle2" type="checkbox" checked data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
<div id="engineer2">Should Change</div>

推荐阅读