需要 .click 的事件侦听器，以便动态刷新按钮工作，但操作成倍增加

Question

我有一个页面，其中一个 div:s 内容（不是整个页面）refresh/reload/update 如果我对数据库进行更改。

此内容包含一个 table，其行包含一些文本和按钮。因为我需要按钮仍然与 .click 一起工作，所以我添加了一个 eventListeners。问题是我第一次按下这个 div 中的一个按钮时它应该是这样，但是每次我按下这些按钮中的一个时，动作都会成倍增加。

好像eventListener太多了。但我需要创建它们，以便每个按钮都可以点击。你会如何解决这个问题？

我的大脑告诉我，我需要删除其他 eventListener（因为每次单击都会创建一个，对吗？），然后触发一个新的。但是我不知道该怎么做。

我的代码类似于下面的代码。所以我第一次按 'Edit' 我得到一个 'Hello'-alert，第二次我得到两个 'Hello'-alerts，第三次我得到三个 'Hello'-alerts。 .....等

HTML

<div class="div-to-reload">
    <?php
        // Loop Through Database {
            echo '<td><p>Some Info</p></td>';
            echo '<td><button class="edit-button">Edit</button></td>';
        }
    ?>
</div>

JS

$(document).ready(function(){

    var setupEventListener {
        $('.edit-button').click(function(e){
            e.preventDefault();
            someFunction();
        });
    }

    function someFunction(){
        // update database with ajax and on success:
        alert('hello');
        $('.div-to-reload').load(document.URL + ' .div-to-reload', setupEventListeners);
    }

    setupEventListener();

});

Answer 1

您可以尝试更换您的

var setupEventListener {
    $('.edit-button').click(function(){
        e.preventDefault();
        someFunction();
    });
}

像这样

$(".div-to-reload").on('click', '.edit-button', function(e){
        e.preventDefault();
        someFunction();
    });
 );

这样您将拥有一个用于所有按钮的处理程序。这没有经过测试，但应该可以工作。

需要 .click 的事件侦听器，以便动态刷新按钮工作，但操作成倍增加

Need eventlistener for .click so that dynamically refreshed buttons work, but actions multiply

ajax

jquery

event-listener