jQuery 在模糊/焦点上不会触发动态添加的元素

Question

我在 jQuery 中动态添加一个元素，在这样做时，我将重点放在该元素上。我正在尝试然后在 上删除此元素blur。然而，blur事件或focusout当失去焦点时事件似乎没有触发。

附加元素：

var searchForm = '<input id="header-search" type="text" class="form-control" placeholder="Search">';
$('body').append(searchForm);
$('#header-search').focus();

绑定到blur()事件：

$('#header-search').on('blur', function() {
    alert('blur');      
    $(this).remove();       
});

编辑： 我刚刚创建了一个 jsFiddle，它似乎可以按我的意愿运行。奇怪的。 https://jsfiddle.net/danhaswings/cpczLL7g/

Answer 1

只需将其更改为：

$(document).on('blur', '#header-search', function() {
    alert('blur');      
    $(this).remove();       
});

由于您的元素是动态添加的，并且在执行您的代码时，选择器找不到任何 DOM 元素#header-search。因此，您需要像上面一样更改代码以修复动态添加的元素。