Bindung bei Änderung und andere Aktionen auf mehrere Ajax geladene Elemente innerhalb div

Question

Ich habe ein Formular, das mehrere Eingänge, Selects und Textareas hat.

Beim Laden findet jQuery jedes Element, setzt seinen Datenattr auf den Standardwert, bindet ein Ereignis on change an ihn und löst eine Änderung aus.

Problem ist, dass einige Auswahlen mit Ajax basierend auf anderen Eingabewerten neu geladen werden.

Gibt es eine einfache Möglichkeit, diesen Code zu ändern, um mit Ajax geladenen Elementen zu arbeiten? Er muss den initialen Datenattr-Wert setzen, aber nur einmal pro Element (nachdem er in dom erscheint), gleich mit dem Auslösen der Änderung.

Dies ist der ursprüngliche Code:

$main_form.find('input, select, textarea').each(function(){ 
    $(this).attr('data-empty', 'true').off('change').on('change', function(){ 
     if ($(this).hasClass('number')) validate_int($(this)); 
     update_progress($(this)); 
    }).trigger('change'); 
}); 

Ich weiß, es ist so etwas wie:

$main_form.on('change', 'input, select, textarea', function(){ 

}); 

Aber das würde die Daten attr bei jeder Änderung binden und es würde die Änderung auch unendlich auslösen . Auch ist die .off('change') nicht wirklich, da gebraucht, ich bin nur gewohnt, es zu benutzen.

Ich möchte diesen Code nicht kopieren und der Ajax-Done-Funktion hinzufügen, da ich versuche, Code-Duplikate zu vermeiden, die das Warten und Anpassen erschweren würden, als es bereits ist. Oder ist das die einzige Option?

.

Wenn Sie irgendwelche Fragen haben, kommentieren Sie einfach und ich werde meine Antwort aktualisieren, um so präzise wie möglich zu sein.

Danke für Hilfe.

Answer 1

Wenn ich richtig verstanden habe, möchten Sie einen Anfangswert für das Attribut data-empty festlegen und ein Änderungsereignis einmal für jedes geladene und zukünftige geladene Formularelement auslösen.

Ich würde vorschlagen, dass Sie Ereignis Delegation für den Teil des Codes verwenden, die auf jedem change Ereignisses ausgeführt werden müssen:

// This will affect all form element (including those loaded with ajax) 
$main_form.on('change', 'input, select, textarea', function(){ 
    if ($(this).hasClass('number')) validate_int($(this)); 
    update_progress($(this)); 
}); 

Erstellen Sie eine Funktion, die anfängliche Zuweisung von Werten führt:

/** 
* Set initial value and trigger change event 
* @param $elem {jQuery object} The target element 
*/ 
function setInitialValue($elem) { 
    $elem.attr('data-empty', 'true').trigger('change'); 
} 

und gesetzt Attribut Anfangsdaten und löst ein change Ereignis auf jedem erfolgreichen ajax Rückruf:

success: function(data) { 
    var targetElement = $('select'); 
    targetElement .append(data); 
    setInitialValue(targetElement); 
} 

Schließlich können Sie ein Änderungsereignis für jedes initialy geladenes Element auslösen:

$(document).ready(function() { 
    $main_form.find('input, select, textarea').each(function(){ 
     setInitialValue($(this)); 
    }); 
});