jquery는 정적 HTML에서 작동하지만 동적 HTML에서는 작동하지 않습니다.

div 요소 중 일부는 ajax를 사용하여 생성되며 정적 인 것은 거의 없습니다. jquery는 동적으로 생성 된 HTML이 아닌 정적 요소에서만 작동합니다. 나는 "애플 리케이션"클래스의 모든 요소를 클릭 jquery를 실행하고 있습니다. 그러나 JQuery와는뿐만 아니라 동적jquery는 정적 HTML에서 작동하지만 동적 HTML에서는 작동하지 않습니다.

<!Doctype html> 
<html> 
<head> 
<title>applications</title> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 

<script src="//code.jquery.com/jquery-1.7.2.min.js"></script> 

<script> 

$(document).ready(function(){ 
$.ajax({ 
     type:'GET', 
     url:'application/show_app.php', 
     data:{show_app:"1"}, 
     success: function(data){ 
      if(data) 
      { 
       var split= data.split('%%%%'); 
       for(var i=0;i<split.length-1;i++) 
       { 
        var div= document.createElement("div"); 
        var div_child=document.getElementById("app_row").appendChild(div); 
        div_child.className="app"; 
        div_child.innerHTML="dynamic"; //dynamically generated     

       } 

      } 
     }, 
     failure: function(){ 
      alert(failed); 
     } 

    }) ; 

$(".app").click(function(){ 
    alert("jquery"); //jquery which will run on clicking the division 

}); 






}); 

</script> 





</head> 
<body id="default" class="full">   //basic html 
    <div class="header"> 
     <h1> 
     <a title="urban airship">urbanairship</a> 
     </h1> 
    </div> 
    <div class="main" name="application-main"> 
     <div class="sub-header"> 
      <h2>Your Applications</h2> 
      <div class="sub-header-actions"> 
       <a href="application/add_app.php/"> 
        <span class="sprite plus-ico"></span> 
        New App 
       </a> 
      </div> 
     </div> 
     <div class="row main-app-list" id="app_row"> 
    <div class="app">static</div> //static html 


     </div> 
    </div> 



</body> 
</html>

출처

2014-06-16 nitin

사용 $ (문서) CSTE 연구진 ('클릭', 기능() { –

들이 DOM에 알려져있다 정적 콘텐츠와 jQuery를 작동하는 이유, 그리고 수 알려진 요소의 이벤트를 처리하지만 동적 내용을 사용하면 .bind()를 사용하여 이벤트를 해당 요소와 바인딩하거나 .live()를 사용할 수 있습니다.이 이벤트는 .on()을 사용하여 기능을 수행 할 수 있습니다. – Pramod

시도를하는 HTML에 정적 HTML에 노력하고 있습니다 : 이벤트 리스너는 이제 개별 요소를 문서에 첨부하고 있지 않기 때문에

$(document).on('click', '.app' , function(){ 
    alert("jquery"); //jquery which will run on clicking the division 
});

이 작동합니다. 이렇게하면 AJAX를 통해로드 된 요소가 이벤트를 계속 실행할 수 있습니다. 에 대한 범위를보아야합니다 (즉, $("#myWrapper").on(...)). 이는 성능 향상을 위해 적합합니다.

참조 문서 : ". 응용 프로그램을"JQuery On

출처

2014-06-16 07:39:15

고마워요. – nitin

jquery는 정적 HTML에서 작동하지만 동적 HTML에서는 작동하지 않습니다.

답변

관련 문제