Click-Ereignis nicht dynamisch eingefügte Element in Chrom arbeiten (jQuery)

Question

Was ich hier tun, ist, dass ich dynamisch ein Drop-down-und binden das click Ereignis an die <option> im <select>

var $select = $('<select></select>'), 
    $option1 = $('<option>a</option>'), 
    $option2 = $('<option>b</option>'); 

    $option1.val(1); 
    $option2.val(2); 

$(document.body).on('click','select option',function(){ 
     console.log("click-option works"); 
    }); 

    $select.append($option1); 
    $select.append($option2); 

    $(document.body).append($select); 

erstellen Wie ich gelesen here, Da ich Inhalte dynamisch hinzufüge, habe ich die Ereignisbehandlung an das oberste Element im DOM delegiert.

Jetzt ist mein Problem, das funktioniert nicht in Chrome wie erwartet. Im Feuerfuchs scheint es gut zu funktionieren.

Ich habe auch this Link gelesen und die other eins, aber ohne Erfolg.

Interessanter, wenn ich dies tun, an der Stelle des 'select option' Selektor

$(document.body).on('click','select',function(){ 
     console.log("click-option works"); 
    }); 

Der Ausgang angemeldet ist, aber das ist definitiv nicht das, was ich im Sinn hatte. Die Ausgabe wird protokolliert, wenn ich das Dropdown-Menü selbst auswähle, ganz zu schweigen von den Optionen im Drop-down-Menü. Als temporäre Arbeit um verwende ich change Veranstaltung in folgenden Weise:

$(document.body).on('change','select',function(event){ 
     console.log("change works"); 
     console.log(event); 
    }); 

Dies scheint den Trick zu tun, ich möchte aber wissen, warum es nicht im ursprünglichen Fall und alle Umgehungen möglichst Arbeits .

Hier ist ein fiddle für das, was ich bisher getan habe.

UPDATE: Ich habe auch this link ausgecheckt. Wie auch immer, das ist nur für reines Javascript, ich wollte wissen, warum es in meinem Fall funktioniert. Genauer gesagt, in der delegierten Event-Handler, wo wir den Selektor angeben, warum schlägt es bei 'select option' und arbeiten bei 'select' in Chrome?

Answer 1

Das Problem liegt daran, dass Sie ein click Ereignis an die option Elemente anschließen, die nicht sehr zuverlässig ist. Das Ereignis click sollte auf select selbst gehen - aber beachten Sie, dass auch das nicht den Best Practices entspricht, da Sie das Ereignis change verwenden sollten, damit Ihr Code auch dann ausgelöst wird, wenn die Option über die Tastatur ausgewählt wird. Um verwenden den Wert des ausgewählten ooption innerhalb des Handlers $(this).val(), wie folgt aus:

var $select = $('<select></select>'), 
 
    $option1 = $('<option>a</option>'), 
 
    $option2 = $('<option>b</option>'); 
 

 
$option1.val(1); 
 
$option2.val(2); 
 

 
$(document).on('change', 'select', function() { 
 
    console.log($(this).val()); 
 
}); 
 

 
$select.append($option1); 
 
$select.append($option2); 
 

 
$('body').append($select);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Beachten Sie auch, dass diese verkürzt werden kann, um gerade:

$(document).on('change', 'select', function() { 
 
    console.log($(this).val()); 
 
}); 
 

 
$('<select><option value="1">a</option><option value="2">b</option></select>').appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>