Предотвращение добавления множественного обработчика событий

Question

У меня есть входной файл

<input type=file class=file-input/> 

имеет первоначально один на странице, и он может быть создан динамически, нажав на кнопку «добавить» на странице, во время каждого добавления, я следующее:

$(".file-input[type=file]").change(alert("hello")) 

Скажем, я нажимаю кнопку «Добавить один раз», у меня будет два файла ввода на странице. Я бы получил два предупреждения при нажатии первого ввода файла, а одно предупреждение при нажатии второго ввода файла, причина в том, что я добавил дважды предупреждение («привет») в событие onChange первого ввода файла, а один раз для второго ввода файла ,

Есть ли способ сделать так, чтобы каждый файл вводил только предупреждение («привет») один раз?

Answer 1

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

$(document).on("change", ".file-input[type=file]", function(event) { 
    alert("hello"); 
}); 

Вам нужно только сделать это один раз при загрузке страницы.

Answer 2

Есть несколько вариантов. Можно было бы использовать делегирование событий с помощью jQuery on. Таким образом, вы присоединяете обработчик к общему родителю один раз в начале и затем не должны повторно присоединяться при создании новых. Что-то вроде этого:

$("<some common parent>").on("change", ".file-input[type=file]", function(){ 
    ... 
}); 

Общий родитель здесь может быть document, если это абсолютно необходимо. В идеале, это должен быть какой-то селектор, который является общим для всех входных файлов.

Другим вариантом является просто прикрепить событие к отдельному элементу в момент создания:

$("<input>")... stuff 
    .change(...) 

Таким образом, вы бы только приложить к этому одному элементу вместо всех существующих элементов.

Answer 3

Вы должны сделать это один раз при инициализации страницы.

В обходной путь решения использовать выкл(), чтобы отделить предыдущие обработчики:

$(".file-input[type=file]").off('change').on('change',function(){ 
alert("hello"); 
});