Применяя класс Ajax загруженного содержания не работает

Question

Вот моя функция, чтобы загрузить свое содержание:

$("#site-nav .nav1").on('click', function() { 
    $(this).addClass("nav-active"); 
    $('ul.top-level').load('assets/includes/recent.php', function() { 
     $(this).show(); 
    }); 
    event.preventDefault(); 
}); 

, что содержимые нагрузки в ul.top-level штрафа.

После того, что содержимое загружается, я пытаюсь применить класс к любому из hrefs в недавно загруженном контенте:

$("ul.top-level li a").on('click', function() { 
    alert("hi"); 
    $(this).addClass("nav-active"); 
}); 

Это не работает, и не предупреждающее сообщение. Есть идеи?

Answer 1

Следует отметить, что вы применяете новые обработчики click, потому что есть хороший шанс, что дом не готов, когда вы пытаетесь их подключить. Однако вы, вероятно, можете решить эту проблему, используя вместо этого live().

live() относится ко всем будущим согласованным селекторам, поэтому, если вы загружаете контент ajax, он должен автоматически прикреплять обработчики кликов к ним.

$("ul.top-level li a").live('click', function() { 
    alert("hi"); 
    $(this).addClass("nav-active"); 
}); 

Edit: С live() устарела, вы можете переписать жить, используя on() вместо как таковой:

$(document).on('click', "ul.top-level li a", function() { 
    alert("hi"); 
    $(this).addClass("nav-active"); 
});