нажмите событие не работает на динамически вставленный элемент хромом (JQuery)

Question

Что я здесь делаю, что я динамически создать раскрывающийся и связать click событие в <option> в <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); 

Как я прочитал here, Так как я динамически добавляю контент, я делегировал обработку событий в самый верхний элемент в DOM.

Теперь моя проблема заключается в том, что это не работает в хроме, как ожидалось. В огне-лисе кажется, что все нормально.

Я также прочитал ссылку this и other один, но безрезультатно.

Интересно, когда я делаю это в месте 'select option' селектора

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

Выход регистрируется, однако, что, безусловно, не то, что я имел в виду. Выход регистрируется всякий раз, когда я выбираю сам раскрывающийся список, не говоря уже о параметрах в раскрывающемся списке. В качестве временной работы вокруг Я использую change событие следующим образом:

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

Это, кажется, делает трюк, однако я хочу знать, почему он не работает в оригинальном футляре и любые обходные, если это возможно ,

Вот fiddle за то, что я сделал до сих пор.

ОБНОВЛЕНИЕ: Я также проверил this link. Однако это только для чистого javascript, я хотел знать, почему он работает в моем случае. Более конкретно, в делегированном обработчике событий, где мы указываем селектор, почему он не работает на 'select option' и работает в 'select' в хром?

Answer 1

Проблема в том, что вы присоединяете событие click к элементам option, которые не очень надежны. Событие click должно начинаться с самого select, но обратите внимание, что даже это не соответствует лучшим практикам, так как вы должны использовать событие change, чтобы ваш код запускался, даже если эта опция выбрана с клавиатуры. Для того, чтобы получить значение выбранного ooption в обработчике использовать $(this).val(), как это:

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>

отметить также, что это может быть сокращено до просто:

$(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>