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

由于您的元素是动态添加的，并且在执行代码时，没有找到带有selector #header-search DOM元素。 因此，您需要更改上面的代码以修复动态添加的元素。

Answer 2

当尝试将事件绑定到任何“动态添加元素”时，最好编写

$(document.body).on("blur", "#header-search", function () {
   // do anything you wanna do...
   alert("blur");
   $(this).remove();
});

Answer 3

如果在添加事件之前附加了元素，则需要使用$(document).on( eventName, selector, function(){} );将事件绑定到已存在的父$(document).on( eventName, selector, function(){} ); 。

这是事件委派 ，您必须使用委托事件方法使用.on（）

 $(document).on('blur', '#header-search', function() { alert('blur'); if ($(this).val() == '' && $searchButton.is(':active') == false) { $(this).remove(); } }); var searchForm = '<input id="header-search" type="text" class="form-control" placeholder="Search STRI...">'; $('body').append(searchForm); $('#header-search').focus(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 4

问题是第7行的$searchButton.is(':active') ，var未定义。

在这个叉子工作正常https://jsfiddle.net/w5jpypcy/

Answer 5

在你的代码中，你必须先添加Jquery，然后再添加HTML

$('#header-search').on('blur', function() {
alert('blur');
if ($(this).val() == '' && $searchButton.is(':active') == false) {
    $(this).remove();
}
});


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

这就是为什么它在你的JSFiddle中工作，你在创建运行时输入标记之后添加了Blur事件，而不是在你的环境中。

希望这可以帮助。