Ajax로드 된 컨텐츠에서 Jquery 이벤트가 작동하지 않습니다.

아래 코드가 작동합니다. 더 나은 방법이 있으면 알려주세요. main.html에서 test.html을 통해 Ajax를로드하고있는 test.html에있는 스크립트 내용을 사용하는 경우. 스크립트가 작동하지 않습니다.Ajax로드 된 컨텐츠에서 Jquery 이벤트가 작동하지 않습니다.

<html> 
    <head> 
     <script src='jquerylocation' type='text/javascript'></script> 
    </head> 
    <body> 
     <div id='ajaxload'></div> 
     <button class='test'>load content via ajax</button> 
    </body> 


    <script> 
     $(function(){ 
      $('.test').on('click',function(){ 
        $('#ajaxload').load('test.html'); 
      });    
     }); 
    </script> 
</html>

인 test.html : 당신이 require.But 단점은 내가 때마다 우리는 아약스 요청 스크립트 부하를 보내 느꼈다으로

<h1 class='heading'>Page via AJAX</h1> 

    <script> 
     $(function(){ 
      $('.heading').on('click',function(){ 
       $(this).css('color','red'); 
      });       
     }); 
    </script>

우리는 일을 아약스를 통해 동적으로로드 된 내용과 함께 스크립트를로드 할 수 항상 콘텐츠와 함께. 그러나 나는이 해결책만을 발견했다. 누구든지 더 나은 해결책을 알고 있다면 회신 해주십시오.

예를 들어 코드를 이렇게 변경하면 작동하지 않을 수 있습니다.

<html> 
    <head> 
     <script src='jquerylocation' type='text/javascript'></script> 
    </head> 
    <body> 
     <div id='ajaxload'></div> 
     <button class='test'>load content via ajax</button> 
    </body> 


    <script> 
     $(function(){ 
      $('.test').on('click',function(){ 
        $('#ajaxload').load('test.html'); 
      }); 

      $('.heading').on('click',function(){ 
       $(this).css('color','red'); 
      });         
     }); 
    </script> 
</html>

인 test.html : 당신이 준비 문서에 이벤트를 바인딩하기 때문에

<h1 class='heading'>Page via AJAX</h1>

출처

2013-07-12 Susheel Singh

이 있습니다. load() 호출의 success 콜백 함수에 이벤트 핸들러를 추가하거나 기본 페이지의 스크립트 섹션에 전역 정의 된 지연 이벤트를 사용하십시오. – Derek

다시 한번 제 질문을 확인하십시오. 그리고 약간의 코드로 회신 해주십시오. –

또한 스크립트 태그를 적절한 속성으로 정의하고 있는지 확인하십시오. html5 DOCTYPE에 따라 적절한 속성 즉, – Derek

이 있습니다. 이 기능을 사용하려면 대리인을 사용해야합니다. on처럼. .header가로드 될 때 페이지의 페이지에 없기 때문입니다. 따라서 이벤트가 첨부되지 않습니다.

$('body').on('click','.heading',function(){ 
    $(this).css('color','red'); 
});

그것은 몸 일 필요는 없지만, 의 부모 인 준비 문서, 후로드되지 않은 요소 :

코드는 다음의 라인을 따라 몇 가지를 보일 것입니다. 제목은입니다.

출처

2013-07-12 17:10:05

오, 멋져요. 체크해 보겠습니다. 대리모 스타일로 사용하길 원합니다. –

공과를 나눠 주셔서 감사합니다. :) –

이것이이 사이트의 모든 것입니다. :) –

하나의 옵션은 부하의 성공에 스크립트를 초기화하는 것입니다 : 당신이 AJAX 호출이 완료된 후 호출되지 않습니다 document.ready 함수에 포장하고 있기 때문에

$('.test').on('click',function(){ 
    $('#ajaxload').load('test.html',function(){ 
     $('body').on('click', '.heading', function(){ 
      $(this).css('color','red'); 
     }); 
    }); 
});

출처

2014-04-22 19:17:47

Ajax로드 된 컨텐츠에서 Jquery 이벤트가 작동하지 않습니다.

답변

관련 문제