Javascript/Jquery 代码在第一个事件上运行一次，在第二个事件上运行两次，依此类推

Question

我将此 JS 函数绑定(bind)到 HTML 按钮 onclick 属性:

function AddFbLikes() {
$('#fbform').on('submit', function(e) {
    e.preventDefault(); // prevent form submission
    $("input:checkbox:checked").each(function(idx, val){
        callResult(val.value);
    });
})}

假设我有 4 个 input 元素匹配条件，我将在 HTML 中附加 4 个元素(这就是 callResult() 的作用)。但如果我第二次点击该按钮，我会再获得 8 个，如果我点击 3 次，我会再获得 12 个..

我尝试过调试这个，但无法弄清楚。我来自 Python/Django，所以一定有一些我无法使用 Javascript 得到的东西。

Answer 1

您的函数 AddFbLikes 每次调用时都会为 $('#fbform') 找到的每个元素添加另一个事件监听器。这就是为什么它找到的四个元素从​​ 4 开始，然后每次增加 4。可能有更好的方法来构建您的代码，但考虑到您给我们的内容，请尝试 one 而不是 on ( http://api.jquery.com/one/ ):

function AddFbLikes() {
    $('#fbform').one('submit', function(e) {
        e.preventDefault(); // prevent form submission
        $("input:checkbox:checked").each(function(idx, val){
            callResult(val.value);
        });
    }
)}