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

Question

Я только что узнал, как использовать метод .on(), и я использую его для добавления обработчика событий к некоторым кнопкам, которые добавляются «вживую» (после готовности DOM).

$('#table').on("click", ".delete", function() { 
    //whatever 
}); 

Это похоже на работу, но когда я использую его в своем коде, я получаю событие click, которое запускается дважды. Он срабатывает столько раз, сколько я изменил селектор, то есть я нажимаю имя в селекторе, а затем еще один, и еще один, скажем, 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> 

Answer 1

просто добавить от() до включения(), чтобы удалить существующее событие на нем

есть вероятность того, что вы уже привязывать событие в этом элементе, поэтому, если вы хотите переподключить событие, которое вы просто отключили («событие»), чтобы избежать fir многократного события

$('#table').off("click").on("click", ".delete", function() { 
    var data_name = $("#dataSelector option:selected").attr('name'); 
    alert(data_name); 
}); 

Answer 2

Я проверил ваш код, для меня его работала нормально. может быть в коде, вы указываете тот же идентификатор для кнопки выбора и удаления. проверьте и дайте уникальное имя каждому из ваших объектов.