jQuery .click vs .change

Question

Я только начинаю изучать Javascript и jQuery (1 день!). Вчера я столкнулся с проблемой, с которой в конце концов работал, но понятия не имею, почему сработало изменение.

TLDR; В jQuery, почему .change вызывает переключение / флажок через тег id, когда .click нет?

Более подробное объяснение ниже:

Я надеюсь понять причину и выяснить, действительно ли то, что я сделал, было правильным решением проблемы, с которой я столкнулся.

Я пытаюсь создать список элементов, которые можно включать и выключать, и обновлять серверную часть с помощью AJAX. Когда я строил свой примерный список из двух, когда я нажимал одну кнопку, он переключал ВСЕ кнопки.

Я звонил через класс (не был уникальным), поэтому я переместил каждую из них на уникальный идентификатор и тогда функция 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>

Answer 1

Событие click() не работает с обоими входами, потому что Bootstrap переопределяет его (как уже упоминалось в ответе Тома) и изменяет DOM для обоих элементов-переключателей - input с id="toggle1" замените на это:

<div class="toggle btn btn-success" data-toggle="toggle" style="width: 112.783px; height: 37.6px;">
   <input id="toggle1" type="checkbox" checked="" data-toggle="toggle" data-on="Ready" data-off="Not Ready" data-onstyle="success" data-offstyle="danger">
   <div class="toggle-group">
      <label class="btn btn-success toggle-on">Ready</label>
      <label class="btn btn-danger active toggle-off">Not Ready</label>
      <span class="toggle-handle btn btn-default"></span>
   </div>
</div>

и, кроме того, стиль ввода установлен на display:none;.

Для того, чтобы он работал с вашим примером, можно установить click() событие в элементах div с class="toggle", которых нет в DOM, когда страница первоначально загружается с использованием делегирования события - событие click() передается от родительского элемента этих элементов div, который уже существует при загрузке страницы - document. Это событие click() затем присоединяется к обоим элементам div с помощью переключателя класса. Чтобы получить соответствующий вход и его идентификатор, можно использовать children(), поскольку входы являются первыми дочерними элементами этих элементов.

 $(document).on( "click", ".toggle", function() { 
    var selected = $(this).children().attr("id");
    var selectedID = selected.substring(6);   
    $("#engineer" + selectedID).html('Changed ' + selectedID);
 });

Working Fiddle

Answer 2

Ваши bootstrap плагины как-то переопределяют ваши команды. Я полагаю, что событие .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>