web-dev-qa-db-de.com

Jquery .change () - Funktion funktioniert nicht mit der dynamisch ausgefüllten SELECT-Liste

Ich habe ein Auswahlfeld, das dynamisch mit einem Ajax-Aufruf gefüllt wird, der einfach alle HTML-Auswahloptionen zurückgibt. Hier ist der Teil von PHP, der nur die select-Tags auswählt und jede Option/jeden Wert dynamisch ausfüllt.

echo "<select name='player1' class='affector'>";
echo "<option value='' selected>--".sizeof($start)." PLAYERS LOADED--</option>";

foreach ($start as $value) {
    echo "<option value='".$value."'>".$value."</option>";
 }  
  echo "</select>";
}  

Nachdem diese Liste ausgefüllt wurde, versuche ich, ein Änderungsereignis aufzurufen. Wenn also die Standardoption in der SELECT-Liste oder in einem Textfeld mit derselben Klasse geändert wird, wird ein Optionsfeld in einem anderen Teil des Formulars deaktiviert . (Sie können die anfängliche Frage sehen, die ich gefragt habe, um diesen Teil der Funktionalität zum Laufen zu bringen - hier )

$('.affector').change(function(){
       $(this).parents('tr').find('input:radio').attr('disabled', false);
});

Obwohl ich dem select-Feld den richtigen Klassennamen (Affektor) gebe, werden andere Teile des Formulars nicht deaktiviert, wenn ich verschiedene Optionen im Feld auswähle. Das statische Textfeld mit derselben Klasse funktioniert einwandfrei. Ich bin verblüfft.

Irgendwelche Ideen?

25
tresstylez

Ich habe gerade Ihre letzte Frage kommentiert ... Folgendes habe ich gesagt:

Verwenden Sie jQuery bind 

function addSelectChange() {
   $('select').bind('change', function() {
       // yada yada
   });
} 

Rufen Sie addSelectChange in Ihrer Ajax-Erfolgsfunktion auf. Es sollte den Trick tun. Schauen Sie sich auch das jQuery-Live-Ereignis an (wenn Sie Ereignisse für alle aktuellen und zukünftigen DOM-Elemente in einem späteren Projekt festlegen möchten). Leider werden das Änderungsereignis und einige andere noch nicht live unterstützt. Bind ist die nächstbeste Sache

20
munch

Eine aktuellere Antwort ..

Da die Elemente dynamisch gefüllt sind, suchen Sie nach Ereignisdelegation .

Verwenden Sie jedoch nicht .live().bind()/.delegate(). SIE SOLLTEN .on() VERWENDEN.

ENTSPRECHEND DEN JQUERY API-DOKUMENTEN :

AB JQUERY 1.7 IST DIE METHODE _/.on() die bevorzugte Methode, um Event-Handler an ein Dokument anzuhängen. Bei früheren Versionen wird die Methode .bind() zum direkten Anhängen eines Ereignishandlers an Elemente verwendet. Handler werden an die aktuell ausgewählten Elemente im jQuery-Objekt angehängt. Diese Elemente müssen also an dem Punkt vorhanden sein, an dem der Aufruf von .bind() erfolgt. Eine flexiblere Ereignisbindung finden Sie in der Diskussion der Ereignisdelegierung in .on() .

Deshalb würdest du so etwas verwenden:

$(document).on('change', 'select', function (e) {
    /* ... */
});
6
Josh Crozier

Ein Beispiel mit .live ()

$('#my_form_id select[name^="my_select_name"]').live('change', (function () {
    console.log( $("option:selected", this).val());
    })
 );
5
Tapefreak

Für Elemente, die dynamisch in das DOM eingefügt werden, müssen deren Ereignisse mit verknüpft werden 

$('.selector').bind('change',function() { doWork() });

Dies liegt daran, dass Sie, wenn Sie $(function(){}); ausführen und Ereignisse mit $.click oder $.change usw. binden, Ereignisse an Elemente binden, die bereits im DOM vorhanden sind. Jegliche Manipulation, die Sie danach vornehmen, wird nicht durch das beeinflusst, was im Aufruf von $(function(){}); geschieht. $.bind weist Ihre Seite an, sowohl zukünftige Elemente als auch aktuelle Elemente in Ihrer Auswahl zu suchen.

3
Jason

Ich habe nur eine Lösung gefunden 

<select id="myselect"></select> 

in php/html datei und generieren sie dann mit ajax optionen dafür: 

$.post("options_generator.php", function (data) { $("#myselect").append(data); });

Nur in options_generator.php nur Echooptionen: 

echo "<option value='1'>1</option>";
echo "<option value='2'>2</option>";
1
bboydev

versuchen Sie es .live: http://docs.jquery.com/Events/live

Aus docs: Bindet einen Handler an ein Ereignis (wie click) für alle aktuellen und zukünftig passenden Elemente. Kann auch benutzerdefinierte Ereignisse binden.

1
brian chandley

Verwenden Sie stattdessen die Funktion delegate (). Mehr dazu hier http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/