проблемы при загрузке внешней страницы с помощью .load, некоторый код jQuery не работает

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я загружаю div с внешней страницы с помощью .load(), и с ним все работает хорошо, это код jquery (он включен во все страницы, поэтому не отсутствуют файлы .js):

  <script>
    $(document).ready(function() {
        $( " #window " ).click(function() {
            $('.loadiv').fadeIn("fast");
            $('.loadiv').load($(this).attr("href")   " .windows-wrapper");
            $('#blackout').fadeIn("fast");
            $('#close').fadeIn("fast");
            return false;
        });
        $("#close").click(function() {
            $('.windows-wrapper').fadeOut("fast");
            $('#blackout').fadeOut("fast");
            $('#close').fadeOut("fast");
        });
            $("#blackout").click(function() {
            $('.windows-wrapper').fadeOut("fast");
            $('#blackout').fadeOut("fast");
            $('#close').fadeOut("fast");
        });

        //change css properties from parent divs
       $(' #child').focus(function(){
      $(this).parent().css( "border", "3px solid #4ec5da" );
    });
        $(' #child').blur(function(){
      $(this).parent().css( "border", "3px solid #D5D5D5" );
    });
    });
    </script>
  

но этот последний фрагмент кода, который позволяет мне изменять некоторые свойства css, не работает, когда я вызываю div с другой страницы с помощью .load(), но если я перехожу непосредственно на страницу, код работает хорошо.

    //change css properties from parent divs
   $(' #child').focus(function(){
  $(this).parent().css( "border", "3px solid #4ec5da" );
});
    $(' #child').blur(function(){
  $(this).parent().css( "border", "3px solid #D5D5D5" );
});
});
  

Я не знаю, в чем может быть проблема, я был бы очень благодарен, если вы поможете мне разобраться. наконец, это способ, который я использую для вызова функций.

 <a id="window" href="register.php">Registro</a>
  

Комментарии:

1. Какие-либо ошибки в консоли? Попробуйте использовать jQuery вместо $.

Ответ №1:

Обработчики событий привязаны только к текущим выбранным элементам; они должны существовать на странице в то время, когда ваш код выполняет вызов привязки события.

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

Используйте

 //change css properties from parent divs
$('.loadiv').on('focus', '#child', function () {
    $(this).parent().css("border", "3px solid #4ec5da");
});
$('.loadiv').on('blur', '#child', function () {
    $(this).parent().css("border", "3px solid #D5D5D5");
});
  

Комментарии:

1. Гениально, я использую это и отлично работает при загрузке с .load, но перестает работать, когда я использую страницу напрямую… поэтому я полагаю, что я буду использовать ваш код для .load и старый код тоже для прямого доступа (или у вас есть идея получше?). в любом случае спасибо.

2. @user3777499, Используй document вместо '.loadiv' этого, это будет работать в обоих темпах