即使在单击事件上,jQuery也不会对动态加载的内容执行

时间:2011-02-10 07:22:54

标签: jquery dom toggle document-ready

我有两个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>

编辑:简化代码

2 个答案:

答案 0 :(得分:3)

虽然live是一个可行的解决方案,但是当加载完成时,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>

答案 1 :(得分:0)

点击绑定可能在.load完成之前发生。尝试将.click替换为a .live version

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