[英]jQuery .on('change', function() {} not triggering for dynamically created inputs
The problem is that I have some dynamically created sets of input tags and I also have a function that is meant to trigger any time an input value is changed.问题是我有一些动态创建的输入标签集,而且我还有一个函数可以在输入值改变时触发。
$('input').on('change', function() {
// Does some stuff and logs the event to the console
});
However the .on('change')
is not triggering for any dynamically created inputs, only for items that were present when the page was loaded.但是
.on('change')
不会为任何动态创建的输入触发,仅适用于加载页面时存在的项目。 Unfortunately this leaves me in a bit of a bind as .on
is meant to be the replacement for .live()
and .delegate()
all of which are wrappers for .bind()
:/不幸的是,这让我有点
.on
因为.on
旨在替代.live()
和.delegate()
所有这些都是.bind()
包装器:/
Has anyone else had this problem or know of a solution?有没有其他人遇到过这个问题或知道解决方案?
You should provide a selector to the on
function:您应该为
on
函数提供一个选择器:
$(document).on('change', 'input', function() {
// Does some stuff and logs the event to the console
});
In that case, it will work as you expected.在这种情况下,它将按您的预期工作。 Also, it is better to specify some element instead of document.
此外,最好指定一些元素而不是文档。
Read this article for better understanding: http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/阅读这篇文章以获得更好的理解: http : //elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/
Use this用这个
$('body').on('change', '#id', function() {
// Action goes here.
});
You can use any one of several approaches:您可以使用以下几种方法中的任何一种:
$("#Input_Id").change(function(){ // 1st way
// do your code here
// Use this when your element is already rendered
});
$("#Input_Id").on('change', function(){ // 2nd way
// do your code here
// This will specifically call onChange of your element
});
$("body").on('change', '#Input_Id', function(){ // 3rd way
// do your code here
// It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});
you can use:您可以使用:
$('body').ready(function(){
$(document).on('change', '#elemID', function(){
// do something
});
});
It works with me.它和我一起工作。
$("#id").change(function(){
//does some stuff;
});
Just to clarify some potential confusion.只是为了澄清一些潜在的混淆。 This only works when an element is present on DOM load:
这仅在 DOM 加载时存在元素时才有效:
$("#target").change(function(){
//does some stuff;
});
When an element is dynamically loaded in later you can use:当稍后动态加载元素时,您可以使用:
$(".parent-element").on('change', '#target', function(){
//does some stuff;
});
$(document).on('change', '#id', aFunc);
function aFunc() {
// code here...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.