Ajax 加載 Function 意外觸發多次

Question

似乎這是一個常見問題，但我似乎無法找到我的情況的根源。 我有一個項目列表，每個項目都有一個編輯按鈕。 每個編輯按鈕都有一個 class 的edit-button 。

下面是將點擊事件綁定到將編輯視圖加載到引導彈出模式中的每個按鈕的代碼。 我的問題是它加載的模式與編輯按鈕一樣多。 因此，如果我有三個帶有編輯按鈕的項目，它會加載該彈出窗口三次。 同樣使用調試器，我得出的結論是點擊事件沒有被觸發六次，而是加載 function。

我的基本 html 結構

<!-- List of Items -->
<ul>
    <li>
        <div>Item 1</div>
        <a class="edit-button" href="~/Controllers/Action/1"></a>
    </li>
    <li>
    <li>
        <div>Item 2</div>
        <a class="edit-button" href="~/Controllers/Action/2"></a>
    </li>
    <li>
    <li>
        <div>Item 3</div>
        <a class="edit-button" href="~/Controllers/Action/3"></a>
    </li>
</ul>
<!-- Popup modal container -->
<div class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="ajax-content container-fluid"></div>
        </div>
    </div>
</div>

Ajax function

$(".edit-button").each(function () {
    $(this).click(function (event) {
        event.preventDefault();
        $(".ajax-content").load(this.href, function () {
            $(".modal").modal({
                keyboard: true
            }, "show");
        });
    });
});

Answer 1

嘗試添加 stopImmediatePropagation() 和恕我直言，最好使用現代的 unobtrusibe javascript 語法

<script type="text/javascript">

 $(document).ready(function () {

 $(document).on("click", ".edit-button", (function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
    
       ... your code

 });
</script>