jQuery는 클릭 이벤트에서도 동적으로로드 된 콘텐츠에서 실행되지 않습니다.

Question

두 개의 document.ready() 함수가 있습니다. 첫 번째 콘텐츠는 div#header에로드됩니다. 두 번째 함수는 hide 함수를 수행 한 다음 새로로드 된 내용에서 토글 함수 을 수행합니다. 큐잉 이슈인지 모르겠지만로드 된 컨텐트를 클릭하면 아래의 alert()도 실행되지 않습니다. 감사.

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#header").load("/documents/collegeradioheader.txt"); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(".hideme").hide(); 
    $(".slick-toggle").click(function() { 
     alert('hi'); 
     $(this).parent().next('div').slideToggle('fast');  
    }); 
}); 
</script> 

편집 : 단순화 된 코드

Answer 1

크리크는 .load이 완료되기 전에 아마 일어나고 바인딩. 당신의 .clicka .live version로 교체 시도해보십시오 live가 작동하는 솔루션입니다

$(".slick-toggle").live('click', function() { 
    alert('hi'); 
    $(this).parent().next('div').slideToggle('fast'); 
}); 

Answer 2

하지만,로드가 완료 화재 AJAX를 load에 complete 이벤트가있다.

<script type="text/javascript"> 
$(function() { 
    $("#header").load("/documents/collegeradioheader.txt", function() { 
     $(".hideme").hide(); 
     $(".slick-toggle").click(function() { 
      alert('hi'); 
      $(this).parent().next('div').slideToggle('fast');  
     }); 
    }); 
}); 
</script>