Jquery .change() -Funktion funktioniert nicht mit dynamisch bevölkert SELECT-Liste

Question

Ich habe ein Auswahlfeld, das dynamisch mit einem Ajax-Aufruf ausgefüllt wird, der einfach alle HTML-Auswahloptionen zurückgibt. Hier ist der Teil von PHP, der nur die Select-Tags zurückgibt 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>"; 
} 

Nach dieser Liste aufgefüllt wird, ich versuche ein Änderungsereignis zu nennen, so dass, wenn die Standardoption in der SELECT-Liste oder in einem Textfeld mit der gleichen Klasse geändert wird, es eine Schaltfläche Radio deaktiviert in einem anderen Teil des Formulars festgelegt. (Sie können die anfängliche Frage sehe ich gebeten, diesen Teil der Funktionalität zum Laufen zu bringen here)

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

Aus irgendeinem Grund, obwohl ich das Auswahlfeld den richtigen Klassennamen (Affektor) geben, wenn ich verschiedene Optionen auswählen Im Feld werden die anderen Teile des Formulars nicht deaktiviert. Das statische Textfeld mit der gleichen Klasse funktioniert einwandfrei. Ich bin ratlos.

Irgendwelche Ideen?

Answer 1

einfach auf Ihre letzte Frage kommentiert ... Hier ist, was ich sagte:

Verwendung jQuery

binden Funktion

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

Anruf addSelectChange in Ihren Ajax-Erfolg. Es sollte den Trick machen. Sehen 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 oder etwas festlegen möchten). Leider werden das Change Event und einige andere noch nicht live unterstützt. Bind ist die nächste beste Sache

Answer 2

Für Elemente, die in das DOM dynamisch eingefügt werden, müssen ihre Veranstaltungen mit

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

weil Dies ist gebunden, wenn Sie $(function(){}); laufen und binden Ereignisse $.click oder $.change verwenden, etc. Sie Ereignisse Bindung an Elemente bereits im DOM vorhanden. Jede Manipulation, die Sie danach machen, wird nicht von dem beeinflusst, was im $(function(){}); Anruf passiert. $.bind weist Ihre Seite an, nach zukünftigen Elementen in Ihrem Selektor sowie nach aktuellen Elementen zu suchen.

Answer 3

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

Von docs: Wird ein Handler auf ein Ereignis (wie Klick) für alle aktuellen - und zukünftigen - verglichene Element. Kann auch benutzerdefinierte Ereignisse binden.

Answer 4

ein Beispiel unter Verwendung .live()

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

Answer 5

ich als Lösung gefunden nur

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

in PHP/HTML-Datei zu machen und dann Optionen generieren für sie durch ajax:

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

In options_generator.php Echo Optionen nur:

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

Answer 6

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

Answer 7

_{A mehr up to date Antwort ..}

Da die Elemente dynamisch bestückt sind, suchen Sie event delegation.

Verwenden Sie nicht .live()/.bind()/.delegate(), obwohl. Sie sollten .on() verwenden.

Nach den jQuery API docs:

Ab jQuery 1,7, die .on() Methode ist die bevorzugte Methode für die zu einem Dokument, Event-Handler zu befestigen. Für frühere Versionen wird die Methode verwendet, um einen Event-Handler direkt an Elemente anzuhängen. Die 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 an erfolgt. Informationen zur flexibleren Ereignisbindung finden Sie in der Beschreibung der Ereignisdelegierung in .on().

Daher würden Sie etwas wie folgt verwenden: "<".. $ Value option value =" ">"

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