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

我将此JS函数绑定到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

元素与条件匹配，我将得到4个附加到HTML中的元素（这就是

callResult（）

所做的）。但是如果我再点击一次按钮，我会得到8个，如果我点击3次，我会得到12个

---

我试过调试这个，但没办法解决。我来自Python/Django，所以一定有一些东西我没有从Javascript中得到

您的函数

AddFbLikes

每次调用它时，都会为

$（“#fbform”）

找到的每个元素添加另一个事件侦听器。这就是为什么它找到的四个元素从四开始，然后每次增长四。可能有更好的方法来构造代码，但是考虑到您给我们的内容，请尝试

one

，而不是

on

（）：

---

当用户单击按钮时，不应绑定事件处理程序。每次都会添加一个额外的处理程序，当事件发生时，它们都会级联。只需勾选复选框

function AddFbLikes() {
    $("input:checkbox:checked").each(function(idx, val){
        callResult(val.value);
    });
}

要防止在单击按钮时提交表单，请将其更改为

type=“button”

（默认值为

type=“submit”

）

添加选定的艺术家

---

一般来说，将一个事件处理程序绑定到另一个事件处理程序中很少是正确的。即使第二个事件处理程序应该以发生的第一个事件为条件，更好的处理方法是让第一个事件处理程序设置第二个处理程序检查的变量。

我会去掉按钮上的内联javascript，一路低调。这将确保表单提交处理程序只添加一次

$('#submit_facebook').on('click', function( { 
     //Attach the handler for form submit
     $('#fbform').on('submit', function(e) {
        e.preventDefault(); // prevent form submission
        $("input:checkbox:checked").each(function(idx, val){
             callResult(val.value);
        });
     })}    
    //Detatch the event handler for the button click   
    $('#submit_facebook').off('click'); 
});

按钮HTML现在是：

<button id="submit_facebook" class="btn-primary img-rounded">add selected artists</button>

添加选定的艺术家

调用AddFbLikes函数还使用了哪些代码？@jeff一点也没有。不是用Javascript或Python。我将添加包含按钮的HTML。确定。几次运行表明，这种方法非常有效。谢谢你，乔治。除非有更好的答案出现（我不知道！），否则我会投票并可能将其标记为正确答案。你能详细解释一下为什么我的代码可以更好地结构化吗？更重要的是，解释addFbLikes为什么/如何“添加”另一个事件侦听器，以及这意味着什么？为什么另一个监听器会触发两次东西？我想说，在

AddFbLikes

之外的某个地方，您应该调用

$（“#fbform”）。在（'submit'，函数（e）{

，一个只被调用一次而不是一次又一次的地方。除了

one

的文档之外，我已经链接到check out以进一步回答，一个元素可以有任意数量的侦听器，无论它们是否相同。在您的情况下，每次调用

AddFbLikes

时，它都会添加另一个侦听器找到的每个元素的事件监听器。该事件监听器是我作为第二个参数传递的函数吗？是的，第二个参数，第一个参数之后的一个参数事件名称

submit

很可能比我的答案更好，尽管我的答案确实解释了OP看到的行为。我只是在一个函数中看到了

on

调用时，不再进一步查看，知道

一个
就能解决问题。@Barmar谢谢。我理解你的答案，但有一件事我不明白：我在哪里将一个事件处理程序绑定到另一个事件处理程序中？我理解为什么多次调用“on”会附加多个处理程序，但我在绑定中绑定到哪里？从<代码> OnCase< /Cord>是一个事件处理程序。我同意并且已经投票了，但是我想在这里扩展一下，你可以考虑上面的块可以放在哪里（HTML之后，在<代码>文档中，准备好了/COD>块，等等），OP不是特别的jQuery精明（虽然Django是Python Web框架）
$('#submit_facebook').on('click', function( { 
     //Attach the handler for form submit
     $('#fbform').on('submit', function(e) {
        e.preventDefault(); // prevent form submission
        $("input:checkbox:checked").each(function(idx, val){
             callResult(val.value);
        });
     })}    
    //Detatch the event handler for the button click   
    $('#submit_facebook').off('click'); 
});

<button id="submit_facebook" class="btn-primary img-rounded">add selected artists</button>