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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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