jQueryは、クリックイベントでも、動的に読み込まれたコンテンツに対しては実行されません。

Question

私は2つのdocument.ready()関数を持っています。最初のコンテンツはdiv#headerにロードされます。 2番目の関数は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が終了する前に、バインディングクリックはおそらく起こっています。 a .live versionを使用して.clickを交換してみてください：

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

Answer 2

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>