Dynamische Eingabe Kontrollkästchen bei Änderungsereignis

Question

Ich habe eine Tabelle mit Kontrollkästchen, die über AJAX paginiert werden. Ich versuche, ein On-Click-Ereignis für eines der neuen angeklickten Kontrollkästchen zu erstellen. Wenn es angeklickt wird, muss ich ein Array von IDs basierend auf der ID dieses Standards aktualisieren.

Das Problem ist, ich kann nicht herausfinden, wie mein Javascript reagiert, wenn die Eingaben nach dem AJAX-Aufruf ausgefüllt werden. Wenn ich die Eingaben in der Ansicht lade, funktioniert das Ereignis on click gut, aber wenn es durch AJAX zurückkommt, wird es nicht erkannt.

Ich habe unter anderem durch mehrere ähnliche Probleme sah:

• http://api.jquery.com/on/
• Event binding on dynamically created elements?
• Alert after checked input checkbox

ich keine Lösungen für mein Problem aus einem der oben finden. Ich kann nicht feststellen, was hier fehlt.

HTML

<table summary="Standard Listing Table"> 
    <thead> 
     <tr> 
      <th scope="col"></th> 
      <th scope="col">Code</th> 
      <th scope="col">Description</th> 
     </tr> 
    </thead> 
    <tbody id="pl-standard-listing"> 
     <tr> 
      <td> 
        <input checked="" name="standards[]" type="checkbox" value="8343"> 
      </td> 
      <td>K.CC.A.1</td> 
      <td>Count to 100 by ones and by tens.</td> 
     </tr> 
    </tbody> 
</table> 

JQuery auf Click-Ereignis

$('#pl-standard-listing tr td').on('click', 'input[type=checkbox]', function() { 
    console.log("Clicked."); 
    console.log(this); 
}); 

die Eingänge für alle Standards von API Hinzufügen

// Select table and whipe current standards that are listed 
var table = document.getElementById('pl-standard-listing'); 
$('#pl-standard-listing tr').remove(); 
for(var iCount = 0; iCount < currentStandards.length; iCount++) { 
    // Check if the standard is in the list of included standards with this grade group 
    if(standardIds.indexOf(currentStandards[iCount].id) === -1) { 
     $('#pl-standard-listing').append($('<tr><td><input name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /></td><td>' + currentStandards[iCount].code + '</td><td>' + currentStandards[iCount].description + '</td></tr>')); 
    } else { 
     $('#pl-standard-listing').append($('<tr><td><input checked name="standards[]" type="checkbox" value="' + currentStandards[iCount].id + '" /></td><td>' + currentStandards[iCount].code + '</td><td>' + currentStandards[iCount].description + '</td></tr>')); 
    } 
} 

Die Standards werden in der Ansicht korrekt geladen. Ich kann den Ereignishandler nicht zum Klicken auf das Kontrollkästchen verwenden. Jede und jede Hilfe wird sehr geschätzt.

Answer 1

entfernen trtd von on Click Event sollte funktionieren.

$('#pl-standard-listing').on('click', 'input[type=checkbox]', function() { 
console.log("Clicked."); 
console.log(this); 
});