javascript - Jquery コードが外部ロードされた html ファイルで機能しない

Question

私は index.php を持っていて、ボタンをクリックして index.php に index-edit.php をロードします<div class="edit-wrapper"> </div>。index.php にいくつかの入力があり、index-edit.php にいくつかの入力があります。フォーカスアウト時にそれらにクラスを追加したいのです.activeが、jQuery は index-edit.php のものにクラスを追加しません.activeが、残りの部分 (index-edit.php ではない) は正常に動作します。

私のscript.jsを見てください。

$( input ).focusout( function() {
    $( this ).addClass('active');
});

$( document ).on( "click", ".btn", function() {
    $('.edit-wrapper').load('index-edit.php');
});

Answer 1

event delegation入力は動的に追加されるため、イベント ハンドラーを登録するために使用する必要があります。

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
    $(this).addClass('active'); 
});

Answer 2

script.js をどこにロードしていますか? これを試して ：

$(document).ready(function(){
  $( input ).focusout( function() {
      $( this ).addClass('active');
  });

  $( document ).on( "click", ".btn", function() {
      $('.edit-wrapper').load('index-edit.php');
  });

});