Javascript 如何防止事件在多次分配时堆积？

我有一个动态创建的列表，我想为它的所有元素添加一个delete按钮上的click事件

每次向列表中添加一个元素时，我都会向所有列表元素添加一个事件，但对于较旧的元素，事件会堆积起来，而不是被替换，因为我多次运行了以下操作：

function(e) {
                    $(".tr-del").on('click',
                            function(e) {
                                alert("delete");
                                $(this).parent().fadeOut("fast");
                            });

结果是，对于较旧的图元，需要多次按delete按钮

即使事件关联运行了多次，我怎么可能只有一个事件。我不知道何时添加姓氏，因此我需要多次运行此操作

---

工作代码在这里：我制作这个是为了显示/测试这种情况。

单击事件被多次添加到元素中。如果只想附加一次事件，则在添加打开（'click'）之前，先添加关闭（'click'）。这将删除现有的click事件并添加一个新事件

   $(".tr-del").off('click').on('click',
                    function(e) {
                        alert("delete");
                        $(this).parent().fadeOut("fast");
                    });

---

我还更新了

尝试一下。这会解决你的问题。。 只需将其添加到click函数的末尾

li.find(".tr-del").on('click',
function(e) {
    alert("delete");
    $(this).parent().fadeOut("fast");
});

---

*因此，使用off（'click'）和on（'click'）是防止事件堆积的最佳选择！！！每次超过（'click'，function（e）{}或$（）。click（function（e）{}）上的函数$（），它都会将1个新事件e堆栈到该标记。第一次单击，它会调用1次，下一次单击，调用2次，然后调用3次，依此类推

我检查了JSFIDLE，删除警报多次出现，这是问题所在吗？那就是点击事件多次附加到元素？@Vinoth是的，这就是问题所在，酷，我补充了答案。请勾选：）此外，此问题可能会有帮助：

 $("#yourIdAttribute").off('click').on('click', function(e) {
     alert("delete"); // Or do something !!
     $(this).parent().fadeOut("fast"); //This is to disappear the tag with #yourIdAttribute
 });