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);
});

Answer 2

我測試了您的代碼，對我來說它可以正常工作。 您可能在代碼中為選擇器和刪除按鈕指定了相同的ID。 請檢查並為每個對象賦予唯一的名稱。