Capture d'un événement de changement sur un champ d'entrée ajouté dynamiquement à une table Jquery Datatables

Question

J'ai un appel ajax qui utilise le code suivant pour ajouter des lignes à un tableau de données pour chaque enregistrement dans la réponse :

strAppName = data.Application_Name
maintCost = '<input class="maintCostField" appid="' + data.Application_ID + '" type="text" placeholder="$">';

$('#myReport').dataTable().fnAddData([
    strAppName,
    maintCost,
    etc,
    etc
]);

J'ai essayé les sélecteurs/événements suivants pour prendre en compte les modifications apportées à la zone de texte, mais aucun d'entre eux ne se déclenche. Ils se trouvent dans la section document.ready...

$(".maintCostField").bind('change',function () {
    val = $(this).val();
    app = $(this).attr('appid');
    alert('Updating app# ' + app + ' with ' + val);
});

$(".maintCostField").on('change',function () {
    val = $(this).val();
    app = $(this).attr('appid');
    alert('Updating app# ' + app + ' with ' + val);
});

(Je sais que celui-ci est obsolète)

$(".maintCostField").live('change',function () {
    val = $(this).val();
    app = $(this).attr('appid');
    alert('Updating app# ' + app + ' with ' + val);
});

Qu'est-ce qui ne va pas ? Je ne vois pas en quoi c'est différent de L'événement Click ne fonctionne pas sur les éléments générés dynamiquement ou bien d'autres encore...

mise à jour* J'ai ajouté ce qui suit à l'événement fnDrawCallback de la table de données et cela fonctionne maintenant, mais il s'exécute autant de fois qu'il y a de formulaires à l'écran.

$(".maintCostField").each(function () {
    this.addEventListener("change", function () {
        val = $(this).val();
        app = $(this).attr('appid');
        alert('Updating app# ' + app + ' with ' + val);
    }, true);
});

Answer 1

La réponse à cette question question est en fait erronée. (Il a mis à jour la réponse !) Vous devez lier l'événement à un élément parent parce que la fonction input n'existe pas encore afin de lier l'événement.

$(document).on('change', '.maintCostField', function() { 

FIDDLE

Answer 2

Vous pouvez également utiliser $(document).on('input', '.maintCostField', function () {