Question

我从javascriptvíaajax创建html按钮。当我按下一个html按钮时，它将调用ajax函数。如果ajax成功，它将得到一个将在for循环中使用的数字。循环将开始，并且在每次迭代中它将创建一个带有onclick属性的html按钮，该属性调用相同的方法但在param中具有不同的数字。如果我们处于第三次迭代，那么c == 2和param将等于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 data doAdCashAjax()中{{1}}的值。也可选但欢迎，当我使用检查器查看动态创建的html按钮时，我可以看到id，类型，值和名称属性，但从不看onClick属性。

非常感谢！

Answer 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

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

1 个答案: