Как определить / выбрать элементы, созданные из JavaScript / JQuery?

Я хочу Show-Hide элемент, щелкнув элемент, который был создан из JS-кода. Но почему-то getElementById и getElementsByClassName не работают, чтобы выбрать эти HTML-элементы. (Пожалуйста, проверьте Демо: http://jsfiddle.net/vy09nnco/ )

Вот код HTML:

 
Hello World!

Создание элемента

(который будет использоваться для Show-Hide) и appending в контейнер div :

 var code = '

Click Me!

'; $('#container').append(code);

Вот полный код JQuery:

 $(document).ready(function () { var code = '

Click Me!

'; var divToShow = document.getElementById('toShow'); var clickMeDiv = document.getElementsByClassName('click-me'); // Here is the problem var isOpenedClass = 'isOpened'; var formIsClosed = true; $(clickMeDiv).click(function() { $(divToShow).toggleClass(isOpenedClass); formIsClosed = false; }); $(clickMeDiv).click(function() { if (formIsClosed) { $(divToShow).removeClass(isOpenedClass); } formIsClosed = true; }) $('#container').append(code); });

Когда я использую другой элемент Show-Hide, он работает хорошо (пример: http://jsfiddle.net/vy09nnco/1/ ), поэтому проблема заключается только в выборе созданного кода.

Спасибо за любую помощь.

это потому, что вы создаете элемент после загрузки страницы, поэтому он не находится в DOM, поэтому к нему не подключен слушатель. Вы можете добавить прослушиватель событий в body (или родительский элемент или что-то еще) для поиска вновь созданного элемента:

 $("body").on("click", clickMeDiv, function() { 

вместо

 $(clickMeDiv).click(function() { 

FIDDLE

Поскольку вы используете Jquery в любом случае, на самом деле нет причины использовать ванильный Javascript. Вы можете сделать так, как это, с гораздо меньшим количеством кода:

FIDDLE

Перед настройкой обработчиков событий click вам нужно добавить элемент в DOM. См. Переупорядоченный JavaScript ниже.

 $(document).ready(function () { var code = '

Click Me!

'; var divToShow = document.getElementById('toShow'); var clickMeDiv = document.getElementsByClassName('click-me'); // Here is the problem var isOpenedClass = 'isOpened'; var formIsClosed = true; $('#container').append(code); //moved up this line $(clickMeDiv).click(function() { $(divToShow).toggleClass(isOpenedClass); formIsClosed = false; }); $(clickMeDiv).click(function() { if (formIsClosed) { $(divToShow).removeClass(isOpenedClass); } formIsClosed = true; }); });