событие onclick не установлено

function main() { 
    workMenu("leftVerticalMenu"); 
} 

function log(obj) { 
    console.log(obj); 
} 

function workMenu(id) { 
    var menuContainer = document.getElementById(id).children[0]; 
    closeListsNodes(menuContainer); 
} 

function closeListsNodes(container) { 
    var object = container.getElementsByTagName("li"); 

    for (var i = 0; i < object.length; i++) { 
     var need = object[i].getElementsByTagName("ul"); 

     for (var j = 0; j < need.length; j++) { 
      need[j].style.display = "none"; 
      need[j].id = i.toString() + j.toString(); 
      need[j].onclick = function() { 
       hideshow(need[j].id); 
      }; 
     } 
    } 
} 

function hideshow(id) { 
    var need = document.getElementById(id); 

    if (need.style.display == 'none') { 
     need.style.display = 'block'; 
    } else { 
     need.style.display = 'none'; 
    } 

}

Этот код создает список в минимизированном режиме и вводит идентификаторы. Но код не добавляет onclick event handler s на страницу html. Я пытаюсь использовать примеры кода, но не работает. Как реализовать это без использования jQuery?событие onclick не установлено

<body onload="main();"> 
    <div id="leftVerticalMenu"> 
     <ul> 
      <li> 
       <a href="#">item 1</a> 
       <ul> 
        <li> 
         <a href="#">item 11</a> 
         <ul> 
          <li> 
           <a href="#">item 111</a> 
          </li> 
          <li> 
           <a href="#">item 112</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">item 12</a> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">item 2</a> 
       <ul> 
        <li> 
         <a href="#">item 21</a> 
        </li> 
        <li> 
         <a href="#">item 22</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</body>

источник

2013-07-18 John Stiks

Я бы предложил позвонить main() в нижней части страницы. –

Будьте осторожны. Было сказано, что примеры из Google не работают. –

Это было сложнее, чем ожидалось. Я нашел причины: пузырьковая последовательность событий, добавление события клика к неправильному узлу/на неправильном элементе и так далее. Вы все еще интересуетесь решением и более подробным объяснением? Пожалуйста, оставьте комментарий, и я добавлю новый ответ. – surfmuggle

Это решение использует только один цикл. Если элемент списка <li> элемент не содержит детей <ul> списка, он останавливает распространение события и предотвращает рушится уже расширенное меню (теперь это также IE8/7 совместимых):

function closeListsNodes(container) { 
    var object = container.getElementsByTagName("li"); 
    for (var i = 0; i < object.length; i++) { 
     var need = object[i].getElementsByTagName("ul")[0]; 
     if (need === undefined) { 
      object[i].onclick = function(e){ 
       e = e||window.event; 
       if (e.stopPropagation) { 
        e.stopPropagation(); 
       } else { 
        e.cancelBubble = true; // for IE8/7 compatibility, http://blog.patricktresp.de/2012/02/internet-explorer-8-and-all-the-fun-stuff-e-stoppropagation-e-preventdefault-mousedown/ 
       } 
      } 
      continue; 
     } 
     need.style.display = "none"; 
     need.id = 'list'+i; 
     object[i].onclick = (function (need) { 
      return function(e){ 
       hideshow(need.id,e); 
      }; 
     })(need); // create closure here to remember/pass the correct element to hideshow() 
    } 
} 

function hideshow(id, e) { 
    e = e||window.event; // for IE8/7 
    var need = document.getElementById(id); 
    if (e.stopPropagation) { 
     e.stopPropagation(); 
    } else { 
     e.cancelBubble = true; // for IE8/7 
    } 
    if (need.style.display == 'none') { 
     need.style.display = 'block'; 
    } else { 
     need.style.display = 'none'; 
    } 
}

http://jsfiddle.net/krTXh/4/ (код)
http://jsfiddle.net/krTXh/4/show (результат)

источник

2013-07-18 12:59:22 Stano

Попробуйте следующее:

if (el.addEventListener) { 
    need[j].addEventListener('click', function() {hideshow(need[j].id);}, false); //IE9+ and other browsers 
} else if (el.attachEvent) { 
    need[j].attachEvent('onclick', function() {hideshow(need[j].id);}); //earlier than IE 9 
}

источник

2013-07-18 05:47:22 Steven10172

У меня есть TypeError: need [j] .attachEvent не является функцией. –

@JohnStiks, я обновил свой ответ – Steven10172

Попробуйте

function closeListsNodes(container) { 
    var object = container.getElementsByTagName("li"); 

    for (var i = 0; i < object.length; i++) { 
     var need = object[i].getElementsByTagName("ul"); 

     for (var j = 0; j < need.length; j++) { 
      need[j].style.display = "none"; 
      need[j].id = i.toString() + j.toString(); 
      need[j].onclick = function() { 
       hideshow(need[j].id); 
      }; 
     } 
    } 
}

или вы можете заменить onclick в

need[j].addEventListener('click', function(){hideshow(need[j].id);});

источник

2013-07-18 05:48:23 Amit

Нет ошибок, но список не расширяется. –

Можете ли вы установить скрипку – Amit

событие onclick не установлено

ответ

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