171

问题是我有一些动态创建的输入标签集,而且我还有一个函数可以在输入值更改时触发。

$('input').on('change', function() {
  // Does some stuff and logs the event to the console
});

但是,.on('change')不会触发任何动态创建的输入,仅适用于加载页面时存在的项目。不幸的是,这让我有点困惑,因为这.on意味着要替换所有这些都是:/.live().delegate().bind()

有没有其他人遇到过这个问题或知道解决方案?

4

8 回答 8

310

您应该为该on函数提供一个选择器:

$(document).on('change', 'input', function() {
  // Does some stuff and logs the event to the console
});

在这种情况下,它将按您的预期工作。此外,最好指定一些元素而不是文档。

阅读这篇文章以获得更好的理解:http ://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

于 2012-11-16T14:53:33.020 回答
26

用这个

$('body').on('change', '#id', function() {
  // Action goes here.
});
于 2016-05-05T10:58:44.417 回答
25

您可以使用以下几种方法中的任何一种:

$("#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
});
于 2018-05-02T07:14:49.900 回答
5

只是为了澄清一些潜在的混乱。这仅在元素存在于 DOM 加载时才有效:

$("#target").change(function(){
    //does some stuff;
});

当稍后动态加载元素时,您可以使用:

$(".parent-element").on('change', '#target', function(){
   //does some stuff;
});
于 2018-04-03T06:40:56.010 回答
4
$("#id").change(function(){
    //does some stuff;
});
于 2015-09-01T12:41:51.417 回答
4

您可以使用:

$('body').ready(function(){
   $(document).on('change', '#elemID', function(){
      // do something
   });
});

它对我有用。

于 2020-02-06T16:01:49.400 回答
2
$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}
于 2018-11-30T08:15:23.160 回答
2

您可以使用“输入”事件,该事件在元素获得用户输入时发生。

$(document).on('input', '#input_id', function() {
  // this will fire all possible change actions
});

w3的文档

于 2019-08-02T09:03:10.107 回答