javascript - 模糊/焦点上的 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();

绑定(bind)到 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();       
});

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