javascript - 使用onClick从javascript创建html按钮调用一个参数的方法

Question

我正在通过 ajax 从 javascript 创建 html 按钮。当我按下 html 按钮时，它会调用 ajax 函数。如果 ajax 成功，它将获得一个将在 for 循环中使用的数字。循环将开始，在每次迭代中，它将创建一个带有 onclick 属性的 html 按钮，调用相同的方法，但参数中的数字不同。如果我们处于第三次迭代，则 c == 2 并且参数将等于 2:

function doAdCashAjax(){

    $.ajax({
        url : '../controller/ajaxController.php',
        type : 'POST',
        data : {
            action:'getNumber'
        },
        success : function(data) {
            //Creates a button for each campaign 
            for(var c = 0;c<data;c++){

                var btn = document.createElement('input');
                btn.setAttribute("id", "Campaign "+c);
                btn.type = "button";
                btn.setAttribute("value","Campaign "+c);
                btn.setAttribute("name",c);
                btn.addEventListener('click', function(){
                    getCampaign(c);
                });
                document.body.appendChild(btn);

            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert ('error: ' + textStatus + ' errorThrown: ' + errorThrown);
        }
    });
}

这是 html 按钮现在调用的方法:

function getCampaign(campIndex){
    $.ajax({
        url : '../controller/ajaxController.php',
        type : 'POST',
        data : {
            action:'setCampaign',
            campIndex:campIndex,
        },
        success : function(data) {
            alert('campaign index: '+campIndex);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert ('error: ' + textStatus + ' errorThrown: ' + errorThrown);
        }
    });
}

所有按钮都已成功创建，但是当我单击它们时，我会获得成功的 ajax，并且无论我按下什么按钮，警报输出始终为 index = 10。我想在这里问如何在函数调用中设置正确的参数，因为我需要从具有不同参数的不同按钮调用该函数。

(可选)我想了解为什么 getCampaign(campIndex) 输出 10，这是 doAdCashAjax() 中 data 的值。也可选择但欢迎，当我使用检查器查看动态创建的 html 按钮时，我可以看到 id、类型、值和名称属性，但看不到 onClick 属性。

非常感谢!

Answer 1

这个问题与范围有关。所有点击事件处理程序都将采用c 的最后一个值。你应该这样做:

for(var c = 0 ; c<11; c++)
{
    ....
    makeFunc(btn, c);
    ....
}
function makeFunc(btn, c)
{
    btn.addEventListener('click', function(){
        getCampaign(c);
    });
}

示例:https://jsbin.com/wecujoburu/edit?js,output