jQuery 不会在动态加载的内容上执行，即使在单击事件上也是如此

Question

我有两个 document.ready() 函数。第一个将内容加载到 div#header 中。第二个执行隐藏功能，然后对新加载的内容执行切换功能。我不确定这是否是排队问题或其他问题，但当我单击加载的内容时，甚至没有执行下面的 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

虽然 live 是一个可行的解决方案，但有一个完整< AJAX load 中的 /code> 事件在加载完成时触发。

<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');
});