jQuery on blur/focusout не запускает динамически добавленный элемент

Question

Я динамически добавляю элемент в jQuery, и при этом я фокусируюсь на элементе. Я пытаюсь удалить этот элемент на blur. Однако событие blur или событие focusout, похоже, не срабатывают, когда фокус потерян.

Добавляя элемент:

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

Binding на blur() событие:

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

EDIT: Я только что создал jsFiddle, и это, кажется, функционирует как я хотеть. Странный. https://jsfiddle.net/danhaswings/cpczLL7g/

Answer 1

Просто измените его:

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

Поскольку ваш элемент добавляется динамически, и когда код выполняется, не DOM элемент не найден с селектором #header-search. Итак, вам нужно изменить код, как указано выше, чтобы исправить динамически добавленные элементы.

Answer 2

Если ваш элемент добавлен перед добавлением вашего события, вам необходимо привязать событие к родительскому, который уже существует, с использованием $(document).on(eventName, selector, function(){});.

Это Event delegation, и вы должны использовать .он(), используя делегированные-события приближаются

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

При попытке связать событие с любым «Динамически добавленным элементом», то» d лучше написать

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

Answer 4

В вашем коде вы должны добавить 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 где вы добавили событие Размытия после Создав ввод времени выполнения тега, а не в вашей среде.

Надеюсь, это поможет.

Answer 5

Проблема была в $searchButton.is(':active') на линии 7, var не был определен.

в этой вилке работает отлично https://jsfiddle.net/w5jpypcy/