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

只需在on（）之前添加off（）即可删除现有事件

您可能已经在该元素中绑定了一个事件，因此，如果您想重新绑定该事件，只需关闭（'event'）即可避免多次触发该事件

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