Question

我将此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个元素，我会在我的HTML中添加4个元素（callResult()的作用是什么）。但如果我再次点击该按钮，我将再获得8个，如果我点击它3次，我将再获得12个..

我已尝试过调试此功能，但无法弄清楚。我来自Python / Django所以必须有一些我没有得到Javascript的东西。

Answer 1

对于AddFbLikes找到的每个元素，您的函数$('#fbform')会在每次调用时添加另一个事件侦听器。这就是为什么它从它找到的四个元素的四个开始，然后每次增长四个。可能有更好的方法来构建代码，但考虑到您给我们的内容，请尝试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);
        });
    }
)}

Answer 2

当用户点击按钮时，您不应该绑定事件处理程序。每次都会添加一个额外的处理程序，并且它们都会在事件发生时级联。只需勾选方框即可。

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

要防止在您点击按钮时提交表单，请将其更改为type="button"（默认为type="submit"）。

<button type="button" id="submit_facebook" onclick="AddFbLikes()" class="btn-primary img-rounded">add selected artists</button>

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

Answer 3

我在按钮上摆脱你的内联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>

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

3 个答案: