#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
Я только что узнал, как использовать метод .on(), и я использую его для добавления обработчика событий к некоторым кнопкам, которые добавляются «в режиме реального времени» (после того, как DOM готов).
$('#table').on("click", ".delete", function() {
//whatever
});
Кажется, это работает нормально, но когда я использую это в своем коде, я получаю событие click, запущенное дважды. Оно срабатывает столько раз, сколько я изменил селектор, то есть я нажимаю имя в селекторе, а затем еще и еще, скажем, 3 раза, затем при нажатии на указанную кнопку я получу предупреждение со всеми этими 3 именами, а не только с тем, которое выбрано в данный момент.
Я не смог воспроизвести его в JsFiddle, поскольку все это довольно большое. Итак, дайте мне знать, что еще я могу добавить, чтобы улучшить вопрос.
JS
$('#dataSelector').change(function() {
#more code
$('#table').on("click", ".delete", function() {
var data_name = $("#dataSelector option:selected").attr('name');
alert(data_name);
});
});
HTML
<div id="selectData">
<label>Select:</label>
<br>
<div class="">
<select id="dataSelector" class="form-control">
<option id="default" selected="true" name="default">Pick</option>
<option value="1" name="somethingA">somethingA</option>
<option value="2" name="somethingB">somethingB</option>
<option value="3" name="somethingC">somethingC</option>
</select>
</div>
</div>
<div id="goal_table" class="col-md-12">
<table id="table" class="table table-bordered">
<tbody>
<tr>
<th>Name1</th>
<th>Name2</th>
<th>Name3</th>
<th>name4</th>
<th></th>
</tr>
<tr id="13">
<td>somethingA</td>
<td>value</td>
<td>whatever</td>
<td>∞</td>
<td>
<button name="13" type="button" class="btn btn-default delete"><i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
Комментарии:
1. Я не вижу ничего подобного в консоли. Пытался перехватить и распечатать ваше событие в консоли. Проверьте этот фрагмент вашего кода: jsfiddle.net/Lrdntz07 ..
2. Да, как я уже сказал, я не смог его воспроизвести, но принятый ответ работает, так что все в порядке.
Ответ №1:
просто добавьте off () перед on (), чтобы удалить существующее событие в нем
существует вероятность того, что вы уже привязали событие к этому элементу, поэтому, если вы хотите повторно привязать событие, которое вы только что отключили (‘event’), чтобы избежать многократного запуска события
$('#table').off("click").on("click", ".delete", function() {
var data_name = $("#dataSelector option:selected").attr('name');
alert(data_name);
});
Комментарии:
1. Как я хочу узнать, не могли бы вы объяснить, почему? Заранее благодарю.
2. Поскольку событие запускается несколько раз, оно привязывается более одного раза. Поскольку у нас нет кода, позволяющего увидеть, где это происходит на самом деле, проще всего отменить привязку всех событий click перед привязкой нового.
3. Я отредактировал вопрос, чтобы его можно было увидеть более четко, но теперь я понял это. Я бы не смог разобраться в этом в одиночку. Спасибо!
4. TBH: лучшим ответом было бы вызвать только
.on()
один раз, а не несколько раз, тогда вам не нужно.off()
. Вы используете.off()
, когда не уверены, где / как это подключается.5. И какой смысл добавлять эти обработчики, я имею в виду, почему поведение по умолчанию не отключено раньше?
Ответ №2:
Я протестировал ваш код, для меня он работает нормально. возможно, в коде вы указываете один и тот же идентификатор для селектора и кнопки удаления. пожалуйста, проверьте и дайте уникальное имя каждому из ваших объектов.
Комментарии:
1. или же используйте … $(‘.delete’).on («click», function() { var data_name = $(«опция#dataSelector: выбрана»).attr(‘name’); оповещение (data_name); });
2. некоторые кнопки создаются динамически, поэтому этот метод не будет работать.
3. Для этого вам нужно использовать метод, который вы используете в данный момент. но для меня это сработало только один раз.