.load加载外部页面时出现问题，某些JQuery代码不起作用

Question

我正在使用.load（）从外部页面加载div，并且一切正常，这是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>

但是当我使用.load（）从其他页面调用div时，这最后一段允许我更改某些CSS属性的代码无法正常工作，但是，如果直接进入该页面，则该代码效果很好。

   //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>

Answer 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");
});