1

Есть у меня форма загрузки файлов. Я сделал так, что бы после выбора файла, вместо формы отображалось имя файла и рядом кнопка [x], для отмены. Проблема в том, что после первого цикла выбора/отмены файла, событие перестает обрабатываться. Как исправить? Собственно сама функция:

$(document).ready(function(){
    $('form input[type=file]').on('change', function() {
        $('input[type=file]').replaceWith('<span class="file">' +
                                          $('input[type=file]').val() +
                                          '</span> <a class="delete" href="#" onclick="return false">[x]</a>');
        if($('a').is('.delete')) {
            $('a.delete').on('click', function() {
                $('span.file').replaceWith('<input name="News[img]" id="News_img" type="file">');
                $('a.delete').remove();
            });
        }
    });
});
2
  • Используйте show и hide вместо replaceWith и remove. 19 мар 2016 в 17:04
  • После первого раза удаляется обработчик onclick поэтому на второй раз и не срабатывает
    – UserX
    19 мар 2016 в 17:23

1 ответ 1

1

Ваша проблема в том, что событие добавляется на конкретный (и только его) DOM элемент и при его удалении удаляется и событие тоже

Вам нужно либо:

  1. добавлять с помощью биндера live(). В этом случае событие добавляться на все элементы. указанные в селекторе, даже на те, к. еще нет и будут добавлены позже. Очень нехорошая идея. С ней сопряжено множество неявных проблем.

  2. нужно обработчик цеплять каждый раз, когда добавляется элемент (на него). Для этого поместите биндер в callback-функцию метода replaceWith() вторым параметром. И добавлять без проверки существования.

4
  • 1
    live deprecated с версии 1.7 и удален с версии 1.9
    – Grundy
    19 мар 2016 в 17:41
  • до сих пор сижу на 1.6 )) Тогда только явный бинд в callback'e 19 мар 2016 в 17:45
  • и это плохо, так как большая часть уже перешла на 2.*, а это значит, что ваш ответ просто не заработает для них, хотя и будет оставаться верным для версий до 1.9
    – Grundy
    19 мар 2016 в 18:04
  • Классический вариант с .on() всегда сработает :)
    – NeedH8
    19 мар 2016 в 21:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.