2009-02-25 6 views
9

이 div 안에 일부 HTML을 추가하고 HTML에 click 이벤트가 있어야합니다.jQuery를 사용하여 HTML w/click 이벤트 추가하기

<div id="myID"> 
     <p>hello, world!</p> 
    </div> 

위의 div 안에 새 div를 삽입하고 거기에 삽입 한 새 HTML에 대한 클릭 이벤트를 원합니다. 새 div 안에는 동적 텍스트가 있으므로 동적으로 작성해야합니다.

어떻게 할 수 있습니까?

답변

12

무엇에 대해 : jQuery를 1.3로

$("#myID").click(
    function() { 
    var someText = "my dynamic text"; 
    var newDiv = $("<div>").append(someText).click(function() { alert("click!"); }); 
    $(this).append(newDiv); 
    } 
) 
0

앤드류 해결 :

<div class="myClass"> 
<p>hello, world!</p> 
</div> 


$(".myClass").live("click", function(){ 
    $(this).after("<div class='myClass'><p>Another paragraph!</p></div>"); 
}); 

이 페이지에서 라이브 이벤트에 대한 자세한 내용을 참조하십시오 이 문제는 나에게! 그러나 .live는 jquery의 최신 버전에서 더 이상 사용되지 않습니다 (1.7 현재). top.document에서 .on 또는 .delegate를 사용하여 이러한 이벤트 유형을 바인드하십시오. 참조 :

$(document).on(".myClass", "click", function(){ 
    $(this).after("<div class='myClass'>Another paragraph!</div>"); 
}); 

축하해! 중요

1

는 :

는 가장 구체적인 선택기를 사용하면 성능이 더 나은 것을 고려. 당신이 "MYID"DIV 내부의 div의 영향을 미치지 만 원하는 경우이 경우를 들어, 사용한다 :

$("#MyId").on("click", "div", function(e) { 
    // Whatever you want to do when the divs inside #MyId div are clicked 
}); 

을 매우 중요 :

고려해야하는 방법에 대한 두 번째 매개 변수, 이 경우 "div"는 선택 사항이지만 이벤트가 자동으로 생성 된 항목에 자동으로 첨부되도록하려면 해당 항목을 제공해야합니다. 이것은 "on"메소드에 대한 jquery 문서에서 지연됩니다. 나는이 정보가 미래에 이것을 읽는 누군가를위한 시간을 절약하길 바랍니다. :)

관련 문제