Erstellen von HTML-Button aus JavaScript mit onClick rufen Sie eine Methode mit einem param

Question

Im Erstellen von HTML-Schaltflächen aus Javascript via Ajax. Wenn ich eine HTML-Taste drücke, wird eine Ajax-Funktion aufgerufen. Wenn ajax erfolgreich ist, erhält es eine Zahl, die in einer for-Schleife verwendet wird. Die Schleife wird gestartet und in jeder Iteration wird eine HTML-Schaltfläche mit onclick-Eigenschaft erstellt, die die gleiche Methode aufruft, jedoch mit einer anderen Nummer in param. Wenn wir in der dritten Iteration sind, dann c == 2 und die param wird gleich zwei sein:

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); 
     } 
    }); 
} 

dieser Methode wird nur die HTML-Tasten für die jetzt anrufen:

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); 
     } 
    }); 
} 

Alle Tasten sind sind erfolgreich erstellt, aber wenn ich auf sie klicke, bekomme ich einen erfolgreichen Ajax und die Alarmausgaben sind immer Index = 10, egal welche Taste ich drücke. Ich möchte hier fragen, wie man den richtigen Parameter im Funktionsaufruf setzt, da ich die Funktion von verschiedenen Tasten mit unterschiedlichen Parametern aufrufen muss.

Optional würde ich gerne verstehen, warum getCampaign(campIndex) ausgibt 10 das ist der Wert von data in doAdCashAjax(). Auch optional aber willkommen, wenn ich den Inspektor benutze, um die dynamisch erzeugten HTML-Knöpfe zu sehen, kann ich die Identifikation, den Typ, den Wert und die Namenseigenschaften aber nie die onClick Eigenschaft sehen.

Vielen Dank!

Answer 1

Dieses Problem ist etwa scope. Alle Klickereignishandler nehmen den letzten Wert von c. Sie sollten diese Art und Weise machen:

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

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