javascript - Jquery 代码不适用于外部加载的 html 文件

Question

我有 index.php 并将通过单击按钮将 index-edit.php 加载到 index.php 中<div class="edit-wrapper"> </div>。我在 index.php 中有一些输入，在 index-edit.php 中有一些输入。我想为.active它们添加类以关注焦点，但 jQuery 不会将.active类添加到 index-edit.php 中的类，但其余部分（不是 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');
  });

});

Answer 3

需要使用事件委托

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