Javascript 动态事件上的onchange事件

我正在创建一个输入类型文件，代码如下

var ele=document.createElement("INPUT");
            ele.type="file";
            ele.id="ele"+i;
            $("#media").append("<br>");
            $("#media").append("<br>");
            $('#media').append(ele);
            $('#ele'+i).on('change',change());
function change()
{
     alert("hello");
}

var ele=document.createElement（“输入”）；
ele.type=“文件”；
ele.id=“ele”+i；
$（“#媒体”）。追加（
）；
$（“#媒体”）。追加（
）；
$（“#媒体”）.append（ele）；
$（'#ele'+i）.on（'change'，change（））；
函数更改（）
{
警惕（“你好”）；
}

---

问题是，当创建元素时，hello会收到警报，为什么？

您正在调用方法，而不是传递处理程序名称

改变

$('#ele'+i).on('change',change());

到

您可以使用将事件委托给父级，您需要指定事件处理程序名称，即

change

，而不是像

change（）

那样调用它。您可以使用以通配符开头的属性选择器将事件绑定到具有

id

的元素，如

ele*

$('#media').on('click', '[id^=ele]', change);

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序

---

您正在调用方法，而不是传递处理程序名称

改变

$('#ele'+i).on('change',change());

到

您可以使用将事件委托给父级，您需要指定事件处理程序名称，即

change

，而不是像

change（）

那样调用它。您可以使用以通配符开头的属性选择器将事件绑定到具有

id

的元素，如

ele*

$('#media').on('click', '[id^=ele]', change);

委派事件的优点是，它们可以从中处理事件 以后添加到文档中的子元素。通过 选择一个元素，该元素保证在 已附加委派事件处理程序，您可以使用委派事件 避免频繁附加和删除事件处理程序

---

这行不正确：

        $('#ele'+i).on('change',change());

应该是：

        $('#ele'+i).on('change',change);

您正在调用函数，而不是将函数作为参数传递

但是在附加每个元素之后，不需要这样做。给新元素一个类，并使用事件委派：

$("#media").on("change", ".file", change); // Do this just once
function change()
{
     alert("hello");
}

var ele=document.createElement("INPUT");
ele.type="file";
ele.className = "file"
$("#media").append("<br>");
$("#media").append("<br>");
$('#media').append(ele);

$（“#媒体”）.on（“更改”，“文件”，更改）；//只做一次
函数更改（）
{
警惕（“你好”）；
}
var ele=document.createElement（“输入”）；
ele.type=“文件”；
ele.className=“文件”
$（“#媒体”）。追加（
）；
$（“#媒体”）。追加（
）；
$（“#媒体”）.append（ele）；

此行不正确：

        $('#ele'+i).on('change',change());

应该是：

        $('#ele'+i).on('change',change);

您正在调用函数，而不是将函数作为参数传递

但是在附加每个元素之后，不需要这样做。给新元素一个类，并使用事件委派：

$("#media").on("change", ".file", change); // Do this just once
function change()
{
     alert("hello");
}

var ele=document.createElement("INPUT");
ele.type="file";
ele.className = "file"
$("#media").append("<br>");
$("#media").append("<br>");
$('#media').append(ele);

$（“#媒体”）.on（“更改”，“文件”，更改）；//只做一次
函数更改（）
{
警惕（“你好”）；
}
var ele=document.createElement（“输入”）；
ele.type=“文件”；
ele.className=“文件”
$（“#媒体”）。追加（
）；
$（“#媒体”）。追加（
）；
$（“#媒体”）.append（ele）；

除了@adil提到的纠正错误的方法外，您还使用jquery标记了问题，这样您就可以做了

$('<input>', {
  type:'file',
  id: 'ele' + i,
  change: change
}).appendTo('#media');

$（“”{
类型：'file'，
id:'ele'+i，
改变：改变
}).appendTo（“#media”）；

除了@adil提到的纠正错误的方法外，您还使用jquery标记了问题，这样您就可以做了

$('<input>', {
  type:'file',
  id: 'ele' + i,
  change: change
}).appendTo('#media');

$（“”{
类型：'file'，
id:'ele'+i，
改变：改变
}).appendTo（“#media”）；

我试过了，很好，但adit实际上告诉了我哪里错了，所以我纠正了他的回答。我试过了，很好，但adit实际上告诉了我哪里错了，所以我纠正了他的回答。我可以问你另一个问题吗？“#媒体”是一个按钮，所以当我使用change（）而不是change时，点击它会提醒hello，为什么？调用函数更改但不绑定它，当执行此代码时，它将调用IMO一次，但事件不会触发。我可以问你另一个问题吗？#媒体”是一个按钮，因此当我使用change（）而不是change时，单击它会提醒hello，为什么？调用函数更改但不绑定它，当执行此代码时，它将调用一次IMO，但事件不会触发。