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

проблема в том, что привет получает извещение, когда создается элемент, почему?

Answer 1

Вы используете метод вызова вместо передачи имени обработчика.

Изменить

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

Для

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

Вы можете делегировать событие родителю с помощью on(), вы должны дать имя обработчика событий change т.е. вместо того, чтобы называть его как change(). Вы можете использовать селектор атрибута с началом с джокером, чтобы связать событие с элементами, имеющих ids как ele*

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

делегированного событие имеет то преимущество, что они могут обрабатывать событие от потомков элементов, которые добавляются к документу в позднее время. К выбор элемента, который, как гарантируется, присутствует во время присоединенного делегированного обработчика , вы можете использовать делегированные события , чтобы избежать необходимости часто прикреплять и удалять обработчики событий, jQuery api.

Answer 2

Эта строка неверна:

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

Кроме того, что @adil отметить, что поправка к вашей ошибке, помеченный вопрос с JQuery, так что вы могли бы сделать

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