使用 onClick 从 javascript 创建 html 按钮调用具有一个参数的方法答案

【问题标题】：creating html button from javascript with onClick call a method with one param使用 onClick 从 javascript 创建 html 按钮调用具有一个参数的方法
【发布时间】：2016-03-22 20:51:44
【问题描述】：

我正在通过 ajax 的 javascript 创建 html 按钮。当我按下 html 按钮时，它将调用 ajax 函数。如果 ajax 成功，它将获得一个将在 for 循环中使用的数字。循环将开始，并且在每次迭代中，它将创建一个带有 onclick 属性的 html 按钮，该按钮调用相同的方法，但参数中的数字不同。如果我们在第三次迭代中，那么c == 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 属性。

非常感谢！

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

这个问题是关于scope。所有点击事件处理程序都将采用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

【讨论】：