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 происходит событие 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>

Answer 2

Привязка кликов, вероятно, происходит до завершения .load.Попробуйте заменить .click на a .live версию :

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