jquery - jQuery does not execute on dynamically loaded content, even on a click events

Question

I have two document.ready() functions. The first loads content into div#header. The second one performs a hide function and then a toggle function on the newly loaded content. I am not sure if this is a queueing issue or something, but not even the alert() below is executed when I click the loaded content. Thanks.

<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>

Edit: simplified code

Answer 1

虽然这live是一个可行的解决方案，但completeAJAX 中有一个事件load会在加载完成时触发。

<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>

Answer 2

点击绑定可能在.load完成之前发生。尝试用.click一个版本.live替换你的：

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