如何将事件添加到jQuery中的新生元素？

我有一个事件，它在页面上插入新的DOM元素。如何添加事件到这个新元素？我的目标是：当用户点击输入时，旧值应该清除。我已经试过这样：如何将事件添加到jQuery中的新生元素？

$('a').on('click', function() { 
    var newel = '<input type="text" value="test" />'; 
    $(newel).insertAfter($('a')); 

}); 
$('input').on('focus', function() { 
    alert($(this).val()); 
    $(this).val(''); 
});

http://jsfiddle.net/WpyUf/ 新事件不添加到元素，为什么呢？

来源

2012-09-03 drzhbe

在未来，请在您的文章的所有相关代码和**不**只包括一个链接到的jsfiddle。您的帖子应该独立于任何其他资源;想想如果jsFiddle将来会发生什么事情。 – Matt

你究竟在做什么？向新元素添加事件可以通过在创建元素后委托或仅绑定事件处理程序来完成，而对于您而言，什么不起作用？ – adeneo

马特，感谢您的建议！ – drzhbe

委托事件的优点是它们可以处理来自后来添加到文档中的事件。通过挑选一个在连接了委托事件处理程序时保证存在的元素，可以将委派事件用于，从而避免需要经常附加和删除事件处理程序。例如，这个元素可能是模型 - 视图 - 控制器设计中的视图的容器元素，或者处理程序想要监视文档中的所有冒泡事件的文档。文档元素在加载任何其他HTML之前在文档的头部中可用，因此在没有等待文档准备就绪的情况下附加事件是安全的。

$('a').on('click', function() { 
    var newel = '<input type="text" value="test" />'; 
    $(newel).insertAfter($('a')); 
}); 
$(document).on('focus', 'input', function() { 
    $(this).val(''); 
});

FIDDLE

来源

2012-09-03 09:50:00 adeneo

你的代码工作，通过改变jQuery版1.7.2

这是updated fiddle

来源

2012-09-03 09:50:43 AdityaParab

将来，请在您的文章中包含所有相关的代码，并且不要只包含jsFiddle的链接。您的帖子应该独立于任何其他资源;想想如果jsFiddle将来会发生什么事情。 – Matt

，你可以不喜欢这样。

$('a').on('click', function() { 
    var newel = '<input type="text" />'; 
    $(newel).insertAfter($('a')).bind('click', function() {alert("me");}); 
; 
});

http://jsfiddle.net/dadviegas/WpyUf/4/

来源

2012-09-03 09:51:08 DadViegas

将来，请在您的文章中包含所有相关代码，并且不要仅包含jsFiddle的链接。您的帖子应该独立于任何其他资源;想想如果jsFiddle将来会发生什么事情。 – Matt

$('a').on('click', function() { 
    var newel = '<input type="text" />'; 
    $(newel).on("focus",function() { alert("hello")}).insertAfter($('a')); 

});

Demo

来源

2012-09-03 09:52:18 mplungjan

如何将事件添加到jQuery中的新生元素？

回答

相关问题