Селектор JQuery не работает с динамическим загруженным содержимым .get

Question

У меня есть страница, которая динамически загружает контент с помощью запроса .get от нажатия кнопки. Загружаемая HTML-страница я не могу заставить какой-либо селектор jquery настроить таргетинг на эту страницу. Я попытался поставить сценарий для предупреждения на странице, которая загружается, а также не повезло.

Что, по-моему, происходит, когда страница загружается, контент, на который я пытаюсь установить таргетинг, не был там, и он не проверяется снова при загрузке страницы? Это только моя догадка, любая помощь будет очень признательна.

Здесь содержимое страницы загружается на главную страницу динамически.

$(".load-page").click(function(){ 
    var href = $(this).attr("data-href"); 
    $.get(href,function (hdisplayed) { 
     $("#content").html(hdisplayed); 
    }); 
}); 

Это то, что я использую для выбора контента на странице.

$(function() { 
    $("#div").click(function(){ 
    alert("hello"); 
}); 

Answer 1

Попробуйте используйте живой обработчик:

$(document).on('click', '#div', function() { 
    alert("hello"); 
}); 

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

См. Также подробный documentation для метода jQuery для on().

Answer 2

Вы хотите использовать .on(), который будет прикреплен к динамически добавленным элементам.

$(function() { 
    $("body").on('click', '#div', function() { 
    alert("hello"); 
    }); 
}); 

Кроме того, не давайте элементам id с div или span или другими именами элементов его просто плохая практика. Я бы рекомендовал использовать целевые селектора классов, а не id, в любом случае, специально для динамически созданного контента. Также я устанавливаю тело в качестве вашей цели, так как я не уверен, что такое структура вашего кода (где находится ваш элемент #div).

Answer 3

Обработчики событий будут работать с ожиданием «.on» на родительском элементе. Но если вам нужно только выбрать динамически загруженные элементы для некоторых других манипуляций, вам нужно дождаться загрузки контента.

$('#parent_element').load(
    url, //url for the AJAX request 
    {}, //data to be sent with the request 
    function(){ //this function will be called when content has loaded 
     $('#dynamic_child_element').css('background','#000'); 
    } 
);