Почему функция отрабатывает только один раз?

Question

[maksplotnikoff]

Есть вот такая функция на jquery:

$('input[type=file]').on('change', function() {

    var value = $(this).val();
    var object = $(this);
    if (value != '') {
      $(object.parent()[0]).addClass('delete-file');
      $(object).remove();
      $('.file_upload').click(function() {
    $(this).removeClass("delete-file");
    $(object.val('')).appendTo(this);
    });  
    }
});

И вот такой код на HTML:

<div class="file_upload"><input type="file" name="drugoe1"/></div>

Первый раз всё прекрасно отрабатывает, а вот второй раз не хочет. Подскажите, в чем может быть причина?

Answer 1

[alex stephen]

При удалении-добавлении DOM-элементов все эвенты по ним теряются.
Надо делать вот так: https://jsfiddle.net/tt77s21b/1/
Здесь я вывел всю эту историю в отдельную функцию, и при изменении DOM обновляю события (12 строка)

Answer 2

[imdeveloper]

Потому что второй раз у вас это условие if (value != '')
уже ложно. Переделайте логику

Comments

[maksplotnikoff]

Почему ложно? Я же добавляю этот же input, при этом отчищаю его значение.

[imdeveloper]

maksplotnikoff: Сделайте так в очищении $(this).val('');

[maksplotnikoff]

imdeveloper: Имеете ввиду сделать очищение перед $('.file_upload').click(function() {} ?

[imdeveloper]

maksplotnikoff: вместо этого $(object.val('')).appendTo(this);

[maksplotnikoff]

imdeveloper: Извините, я может быть немного не понимаю? Если я сделаю так, как говорите Вы, то отчистится значение у .file_upload. А т.к. var object = $(this), this - это input[type=file], то я и написал, чтобы он чистил значение input[type=file]. Тыкните пожалуйста, если не прав?

[imdeveloper]

maksplotnikoff: Я только увидел. А зачем вы вырезаете элемент из DOM дерева $(object).remove(); ?

[imdeveloper]

maksplotnikoff: Так понятно работать не будет, потому что оно его не видит больше. Вам надо не удалять его а делать или disabled или срывать видимость, но не удалять

[maksplotnikoff]

imdeveloper: Сначал кнопка выглядит как стрелочка (загрузить документ). После того, как файл выбран, у меня идет .addClass('delete-file') - меняет стиль кнопки на крестик (удалить документ). И когда я на него кликаю, у меня сразу выскакивает окошко с выбором нового файла. А мне как раз таки нужно сделать так, чтобы при клике на крестик, он удалял документ и возвращал кнопке вид стрелочки, чтобы при повторном клике я мог снова его загрузить

[maksplotnikoff]

Может быть дело в .on('change', function()? Может быть неправильно событие выбрал?

[maksplotnikoff]

imdeveloper: Ну почему он его не видит, если я его создаю заново?

[imdeveloper]

maksplotnikoff: попробуйте .live('click',function(){})

Answer 3

[trushka]

Надо не $('.file_upload').click(function() {.., а $('.file_upload').one('click', function() {...
Чтоб клик только один раз сработал после каждого change