Javascript: Append Дети с функциями: FireFox против Chrome

У меня есть тестовая страница на основе проблемы я испытывающий:Javascript: Append Дети с функциями: FireFox против Chrome

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
      #selectDiv { display: inline; } 
     </style> 
     <script type="text/javascript"> 
      function changeOption(args) { 
       var sel = document.createElement("select"); 
       var opt1 = document.createElement("option"); 
       var opt2 = document.createElement("option"); 
       var opt3 = document.createElement("option"); 
       opt1.value = "opt1"; 
       opt1.appendChild(document.createTextNode("Option 1")); 
       sel.appendChild(opt1); 
       opt2.value = "opt2"; 
       opt2.appendChild(document.createTextNode("Option 2")); 
       sel.appendChild(opt2); 
       opt3.value = "opt3"; 
       opt3.appendChild(document.createTextNode("Option 3")); 
       sel.appendChild(opt3); 

       // working on FireFox, not on Chrome 
       opt1.onclick = function() {changeOption()} 
       opt2.onclick = function() {changeOption()} 
       opt3.onclick = function() {changeOption()} 

       document.getElementById("selectDiv").appendChild(sel); 
      } 
     </script> 
    </head> 
    <body> 
     <h1>This is a test.</h1> 
     <div id="selectDiv"> 
     <select id="test_select1" onchange="changeOption()"> 
      <option value="opt1">Option 1</option> 
      <option value="opt2">Option 2</option> 
      <option value="opt3">Option 3</option> 
     </select> 
     </div> 
    </body> 
</html>

В FireFox, это работает, как я бы ожидать: каждый новый выбор создаются с тремя вариантами; выбор одного создает новый выбор с тремя параметрами.

Но в Chrome он останавливается при втором выборе. То есть, новый созданный элемент, похоже, не получает функцию onclick. Первый выбор счастливо создает больше выборок, но это не то, что я ищу.

Safari ведет себя как Chrome, но этого можно ожидать, правда? Я пробовал версию jQuery, но она тоже не работает. Может кто-нибудь помочь мне здесь?

источник

2015-07-17 Phil Smith

Это, вероятно, что-то делать с тем, как браузеры ручки, указывающие на обработчики событий. Вы можете исправить это, используя делегат, который прослушивает selectDiv. Я не уверен, что вы используете jQuery или нет, поэтому реализация будет отличаться. – Sinistralis

«он останавливается при втором выборе», первый выбор работает, потому что вы построили html. – Octopus

См. Также [этот вопрос] (http://stackoverflow.com/questions/1402227/click-event-on-select-option-element-in-chrome) – Octopus

Привязать обработчик изменений к элементу select, а не обработчику кликов по параметрам. Так что это:

sel.onchange = function(){ 
    changeOption(); 
}

Вместо:

opt1.onclick = function() {changeOption()} 
opt2.onclick = function() {changeOption()} 
opt3.onclick = function() {changeOption()}

Fiddle: https://jsfiddle.net/c1kmtnfd/

источник

2015-07-17 18:03:33

Вы не объяснили, почему. Почему в Chrome не работают события onclick? – Octopus

Во-первых, это плохая практика. Событие с кликом не запускается, если я вставлял вкладку и менял параметр с помощью моей клавиатуры - событие изменения на выбранном. Я ищу спецификацию Chrome для onclick. –

Я не нашел официальной документации от Chrome; однако, привязка обработчика onchange к выбору - это, безусловно, более надежный кросс-браузер. Вот таблица реализованных событий в элементе option в разных браузерах: http://webbugtrack.blogspot.ca/2007/11/bug-280-lack-of-events-for-options.html –

Javascript: Append Дети с функциями: FireFox против Chrome

ответ

Смежные вопросы