javascript - jQuery on blurfocusout not firing on dynamically added element - Stack Overflow

admin管理员组

文章数量:1277257

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. /

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/danhaswings/cpczLL7g/

• javascript
• jquery

Share Improve this question Follow edited Feb 10, 2016 at 12:12 Shashank Agrawal 25.8k1111 gold badges9696 silver badges125125 bronze badges asked Feb 10, 2016 at 12:03 Daniel DewhurstDaniel Dewhurst 2,60322 gold badges2424 silver badges4040 bronze badges 1

• 1 use: event delegation method – Bhojendra Rauniyar Commented Feb 10, 2016 at 12:03

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

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.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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();
});

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

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

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.

本文标签： javascriptjQuery on blurfocusout not firing on dynamically added elementStack Overflow