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

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

Answer 2

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

public class Coupon
{
    public Coupon()
    {
        footballMatches = new List<FootballMatch>();
    }

    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int CouponId { get; set; }
    public int UserId { get; set; }
    public virtual List<FootballMatch> footballMatches { get; set; }
}

Answer 3

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

这是Event delegation，你必须使用.on（）使用委托事件方法

＆＃13;

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

＆＃13;

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

＆＃13;

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事件，而不是在你的环境中。

希望这有帮助。

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

5 个答案: