Question

我正在创建一个输入类型文件，代码就像这样

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

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

Answer 1

此行不正确：

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

Answer 2

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

更改

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

要

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

您可以使用on()将事件委托给父级，您需要提供事件处理程序名称，即change，而不是像change()那样调用它。您可以将带有通配符的属性选择器用于将事件绑定到ids <{1}}的元素，如ele*

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

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序jQuery api。

Answer 3

除了@adil提到的，这是对你的错误的更正，你用jquery标记了问题所以你可以做

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

关于动态事件的onchange事件

3 个答案: