模糊/焦点上的jQuery没有触发动态添加的元素

Question

I'm dynamically adding an element in jQuery, and upon doing so, I'm focusing on the element. I'm trying to then remove this element on blur . However, the blur event or the focusout event don't seem to be firing when the focus is lost.

Appending the element:

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

Binding to the blur() event:

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

EDIT: I just created a jsFiddle, and it seems to function as I want. Strange. https://jsfiddle.net/danhaswings/cpczLL7g/

Answer 1

Just change it to:

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

Since your element is being added dynamically and when your code is executed, no DOM element is found with selector #header-search . So, you need to change the code like above to fix for dynamically added elements.

Answer 2

When trying to bind an event to any 'Dynamically added element', it'd be better to write

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

Answer 3

If your element is appended before adding your event, you need to bind the event to a parent that already exists using $(document).on( eventName, selector, function(){} ); .

This is Event delegation and you have to use .on() using delegated-events approach

 $(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

The problem was the $searchButton.is(':active') on line 7, the var was not defined.

in this fork is working fine https://jsfiddle.net/w5jpypcy/

Answer 5

In your code you must have added Jquery first and then the HTML like

$('#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();

that is why it is working in your JSFiddle where you have added Blur event after you created your runtime input tag and not in your environment.

Hope this helps.