動態事件上的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（）將事件委托給父對象，您需要提供事件處理程序名稱，即change而不是像change()那樣調用它。 您可以使用以通配符開頭的屬性選擇器將事件綁定到具有ele*等ids元素

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

委派事件的優勢在於，它們可以處理來自后代元素的事件，這些事件在以后的時間添加到文檔中。 通過選擇保證在附加委托事件處理程序時會出現的元素，您可以使用委托事件來避免頻繁附加和刪除事件處理程序jQuery api的需要 。

Answer 3

除了@adil提及的內容（這是對您的錯誤的更正）之外，您還使用jquery標記了問題，因此您可以

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