JavaScript/JQuery에서 생성 된 요소를 감지/선택하는 방법은 무엇입니까?

Question

JS 코드에서 생성 된 요소를 클릭하여 요소를 Show-Hide으로 만들고 싶습니다. 그러나 어떤 이유로 getElementById 및 getElementsByClassName은 이러한 HTML 요소를 선택하지 못합니다. 여기

는 HTML 코드

var code = '<p class="click-me">Click Me!</p>'; 
$('#container').append(code); 

:

<div id="toShow">Hello World!</div> 
<div id="container"></div> 

컨테이너 div에 <p> (보기 숨기기하는 데 사용됩니다) 요소와 appending 만들기 : (http://jsfiddle.net/vy09nnco/ 데모를 확인하시기 바랍니다)

$(document).ready(function() {  
    var code = '<p class="click-me">Click Me!</p>';  
    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);  
}); 

: 여기

는 전체 JQuery와 코드

Show-Hide에 다른 요소를 사용하면 잘 작동합니다 (예 : http://jsfiddle.net/vy09nnco/1/). 그 이유는 생성 된 코드를 선택해야 문제가 발생하기 때문입니다.

도움 주셔서 감사합니다.

Answer 1

페이지가로드 된 후에 요소를 만들므로 DOM에 없으므로이 요소에 첨부 된 리스너가 없기 때문입니다. 당신은 body에 이벤트 리스너를 추가 할 수 있습니다 (또는 부모 요소 또는 무언가) 새로 만든 요소를 ​​찾기 위해 :

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

대신

$(clickMeDiv).click(function() { 

FIDDLE

당신이있어 이후 어쨌든 Jquery를 사용하면 바닐라 자바 ​​스크립트를 사용할 이유가 없습니다. 당신은 훨씬 덜 코드와 같은 soemthing을 수행 할 수 있습니다

FIDDLE

Answer 2

당신은 당신의 클릭 이벤트 핸들러를 설정하기 전에 DOM에 요소를 추가해야합니다. 아래에서 재정렬 된 JavaScript를 참조하십시오.

$(document).ready(function() {  
    var code = '<p class="click-me">Click Me!</p>';  
    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; 
    });  
});