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>