Запуск события jQuery при нажатии несколько раз

#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. Для этого вам нужно использовать метод, который вы используете в данный момент. но для меня это сработало только один раз.