javascript - 动态事件上的 onchange 事件

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()将事件委托给父级，您需要提供事件处理程序名称 iechange而不是像change(). 您可以使用以通配符开头的属性选择器将事件绑定到具有ids类似ele*

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

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

Answer 3

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

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