JQuery를 사용하여 동적으로 생성 된 HTML 요소를 클릭하십시오.

Question

동적으로 생성 한 요소를 클릭하고 경고를 생성 할 수 있기를 원합니다. .on을 사용하는 방법에 대해 비슷한 스레드를 살펴 보았지만 정적 요소에서만 작동하도록 할 수 있습니다. 미리 감사드립니다!

<span id="about">About</span> 

<div id="lhn"></div> 

그리고 자바 스크립트 :

$(document).ready(function() { 

    $("#about").click(function() { 

     $("#lhn").append("<div id='#child'>Child</div>"); 

     $("#lhn").on("click", "#child", function() { 
      alert("Child has been clicked"); 
     }); 

    }); 

}); 

Answer 1

바인드 당신의 about 클릭 핸들러 외부 이벤트입니다. 요소를 만들 때 또한, 귀하의 ID는하지 #childchild을해야한다 : 나는 요소를 추가하는 데 사용할

$(document).ready(function() { 
    $("#lhn").on("click", "#child", function() { 
     alert("Child has been clicked"); 
    }); 

    $("#about").click(function() { 
     $("#lhn").append("<div id='child'>Child</div>"); 
    }); 
}); 

Answer 2

한 기술은 다음 요소를 생성을 추가하는 것입니다.

var element = $("<div id='child'>Child</div>").appendTo("#lhn").on("click", function() { 
    alert("Child has been clicked"); 
}); 

Answer 3

작성한 코드에 여러 가지 문제가 있습니다.

는 첫째 둘째

$("#lhn").append("<div id='child'>Child</div>"); 

있어야

$("#lhn").append("<div id='#child'>Child</div>"); 

- HTML 페이지에서 ID 년대

그래서 대체 고유로되어있다

$("#lhn").append("<div id='child'>Child</div>"); 

난 당신이 이미 이벤트를 위임하는 볼, 그래서 click event 외부에 클릭 이벤트를 이동

$("#lhn").append("<div class='child'>Child</div>"); 

셋째

와

. 그렇지 않은 경우 이벤트는 모든 클릭에서 요소에 여러 번 바인딩됩니다..

$("#about").click(function() { 
    $("#lhn").append("<div class='child'>Child</div>"); 
}); 

$("#lhn").on("click", ".child", function() { 
    alert("Child has been clicked"); 
}); 

Answer 4

사용이 간단한 코드,

$("#child).live("click",function(){ 
    alert(); 
});