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

creating html button from javascript with onClick call a method with one param

本文关键字：一个 有一个 方法 参数 JavaScript onClick 创建 html 调用 按钮 使用      更新时间：2023-09-26

Im create html button from javascript vía ajax.当我按下 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 属性。

非常感谢！

这个问题是关于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

相关文章：