Блог

У меня есть пуговица и холст. При нажатии кнопки можно создать новое поле. Каждое поле, размещенное таким образом на холсте, включает форму с двумя полями: раскрывающимся списком ( <select> ) и целочисленным полем ввода. Сейчас я сосредоточен только на приоре.

Представьте, что пользователь трижды нажал кнопку «Создать поле», создав, таким образом, три отдельных поля, каждое из которых содержит вышеупомянутые поля формы. Я хочу показывать всплывающее окно каждый раз, когда пользователь изменяет какое-либо из выпадающих значений.

Поскольку все созданные поля имеют одинаковое indi-box имя класса, а тег select имеет name атрибут chosen_string , я придумал следующий фрагмент jQuery:

 // check for value change in any of the forms
$(document).ready(function(){
    $(".indi-box select[name='chosen_string']").on("change", function(){
        alert($(this).val()); 
    });
});

 

Однако предупреждающее сообщение не появляется. Я также попробовал немного другой синтаксис, но тоже безуспешно:

 $(".indi-box select[name='chosen_string']").change( function() {
    alert($(this).value);
});
 

Я разместил здесь полный функциональный код. Что я здесь упускаю?

Я просмотрел вашу скрипку и увидел, что вы скрыли родительский div с помощью скрытого атрибута html, который в конечном итоге не может прикрепить обработчик событий к элементу, потому что он не существует. Для этого вам необходимо понять Делегирование событий.

Для получения дополнительной информации о делегировании мероприятий

 $(document).on('change','select', function() {
    alert($(this).val());
});
 

Скрипка

Вы можете передать true в качестве аргумента методу clone() jQuery, чтобы скопировать любые обработчики событий, прикрепленные к клонируемому элементу.

 let clone = $("#box-copy").clone(true).removeAttr("hidden").removeAttr("id");
 

Это дало бы вам:

 <button id="add-new-btn" title="Add new box">New Box</button>

<!-- COPY OF BOX (HIDDEN) -->
<div id="box-copy" class="indi-box" style="" hidden>
  <form id="test-id" method="post" action="">
    <p>
      <label for="id_chosen_string">Please select:</label>
      <select name="chosen_string" required="">
      <option value="" selected="">Select...</option>
      <option value="a0">a0</option>
      <option value="b1">b1</option>
      </select>
    </p>
  </form>

  <p>
    <label for="id_chosen_number">Please select:</label>
    <input type="number" name="chosen_number" placeholder="0" required>
  </p>
</div>

<div id="canvas"></div>

<script>
  $("#add-new-btn").on("click", function(){
    let clone = $("#box-copy").clone(true).removeAttr("hidden").removeAttr("id");
    clone.find("*").removeAttr("id");
    clone.draggable().resizable();
    $('#canvas').append(clone);
  });

  $("select[name='chosen_string']").on("change", function() {
    alert($(this).val());
  });
</script>