动态创建元素上的事件绑定而不多次调用事件？

Question

我有一个页面，用户可以在其中创建一个可以有多个块的投票，每个块可以有多行，每行可以有多个字段。 加载页面时，有一个按钮用于添加新块，块 1 中的一个按钮用于向该块添加新行，一个按钮用于从块 1 向第 1 行添加新字段。

当创建另一行（或块）时，会出现另一个按钮以向该行（或该块的行）添加新字段

在这个 stackoverflow-question的帮助下，我创建了一个 function

$('.addLineButton').on('mouseover', function () {
    var button = $(".addLineButton");
    $(button).click(function (e) {
        //Add a new line
    }
}

但问题是每次我在 addLineButton 上使用 hover 时，function 都会再次初始化，当我在鼠标悬停 5 次后按下按钮时，会创建 5 条新行。 当我像这样使用 function 时，动态创建的按钮不起作用：

$('.addLineButton').click(function (e) {
    //Add a new line
}

我该如何解决这个问题，以便每个新创建的按钮都可以工作并且每个按钮只创建一个新的字段/行/块？

Answer 1

我很愚蠢，对不起这个问题。

我刚刚解决了我的问题，将onclick="addField(this)" / onclick="addLine(this)" / onclick="addBlock(this)"添加到我所有现有和动态添加的按钮中，并创建了常用的 javascript 函数来添加场/线/块：

function addLine(alButton){
    //Add a new line
}