需要eventlistener作为.单击，以便动态刷新的按钮可以工作，但动作乘以乘法

Question

我有一个页面，如果我对数据库进行更改，则一个div：s content（不是整个页面）刷新/重新加载/更新。

此内容包含一个包含一些文本和按钮的行的表。由于我需要按钮仍与.click一起使用，因此我添加了一个EventListeners。问题是，我第一次按下该div中的一个按钮，但每当我按下这些按钮之一时，动作都会乘以。

就像有太多的eventlisteners一样。但是我需要创建它们，以便每个按钮可单击。您将如何解决这个问题？

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

我的代码看起来像下面的代码。因此，第一次按"编辑"时，我会得到一个"你好" - 第二次，我第二次获得两个'hello'-alts，我得到了三个'hello'' - alts ..........................................P>

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

这样，您将拥有一个用于所有按钮的单个处理程序。这不是测试而应起作用的。