Question

我正在添加如下的eventListener：

var runSingleTest = document.getElementById('runSingleTest');
runSingleTest.addEventListener('click', sendSingeleTestCase);

当用户在我的表单中单击该按钮后，代码执行1 + n次，其中n是之前单击该按钮的数量。

function sendSingeleTestCase(){
    var frm = $('#scriptCodeForm');
    var btn =  $('#runSingleTest');
    saveScriptToLocalStorage();
    frm.submit(function (ev){
        $.ajax({
            type: frm.attr('method'),
            url: btn.attr('formaction'),
            data: frm.serialize(),
            success: function (data) {
                console.log("Test would run once.");
            }
        });
        ev.preventDefault();
    });    
}

它的行为不符合预期（当它应该只执行一次时执行很多次。）

你能帮助我理解为什么它没有按照假设运作的可能原因吗？

谢谢！

Answer 1

您正在单击处理程序中连接提交处理程序。将它们分开，以便您只注册一次提交处理程序。

e.g。类似的东西：

function sendSingeleTestCase(){
    saveScriptToLocalStorage();
}

var frm = $('#scriptCodeForm');
var btn =  $('#runSingleTest');
frm.submit(function (ev){
    $.ajax({
        type: frm.attr('method'),
        url: btn.attr('formaction'),
        data: frm.serialize(),
        success: function (data) {
            console.log("Test would run once.");
        }
    });
    ev.preventDefault();
});

另请注意：在使用jQuery时，请将您的点击处理程序转换为：

$('#runSingleTest').click(sendSingeleTestCase);

或将处理程序代码放在一个非常好的函数中：

$('#runSingleTest').click(function(){
    saveScriptToLocalStorage();
    // Do other stuff
});

为什么函数执行1 + n次应该在点击时执行一次？

1 个答案: