onClickでjavascriptからhtmlボタンを作成する1つのパラメータでメソッドを呼び出す

Question

javascriptvíaajaxからhtmlボタンを作成しています。 htmlボタンを押すと、ajax関数が呼び出されます。 ajaxが成功すると、forループで使用される数値が取得されます。 ループが開始され、各反復で、同じメソッドを呼び出すonclickプロパティを持つhtmlボタンが作成されますが、その番号はparamで異なります。私たちは3回目の反復である場合、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)の出力がdataの値である理由を理解したい場合は、doAdCashAjax()を入力してください。またオプションではあるが、歓迎しますが、インスペクタを使用して動的に作成されたhtmlボタンを表示すると、id、type、value、nameプロパティは表示されますが、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