Обновите динамический элемент, используя jQuery

Question

Обновите динамический элемент, используя jQuery

0

Я использую jQuery .on() чтобы получить событие click для динамического элемента, например:

$("body").on("click", "#books tr", function() {
    ....
    // generates a button
    $("#result").append("<button class='upload'>Upload</button>"+
                        "<input type='file' class='hidden'><span></span>");
});

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

$("body").on("click", ".upload", function() {
    // which alters the element previously created by the .on() even before.
    var input = $(this).next("input");

    $(input).click();

    var upload = $(input).val();
    $(input).next("span").html(upload);
});

Хотя я пытаюсь обновить html в теге span, процесс обновления происходит только один раз, когда я дважды .upload() кнопку .upload().

Выбор элемента во input теге в первый раз не обновляет span который он должен. Повторное нажатие кнопки обновляет тег.

Namit 21 март 2014, в 07:46

Источник

0

Вы должны создать демо JSFiddle для него. Не только для того, чтобы получить лучшие ответы, но и чтобы вы сами смотрели на это из вашего текущего документа. Это мне очень помогает, пытаясь сделать простую демонстрацию, концентрируясь только на неисправных частях
DHS 21 март 2014, в 06:40
0

@Namit Вы можете принять один из ответов как правильный;)
webeno 21 март 2014, в 07:19

Теги:

javascript

jquery

2 ответа

0

У вас есть 2 события клика. Первая создает первую кнопку, а вторая - загрузку. Снимите событие on click для первого, вместо этого вы можете создать его, когда документ будет готов. Таким образом, кнопка загрузки уже будет там, и вам нужно будет только щелкнуть один раз.

Вот что я сделал бы:

$( document ).ready(function() { // <-- this is what I replaced!
    // generates a button
    $("#result").append("<button class='upload'>Upload</button>" +
        "<input type='file' class='hidden'><span></span>");
});

$("body").on("click", ".upload", function () {
    // which alters the element previously created by the .on() even before.
    var input = $(this).next("input");

    $(input).click();

    var upload = $(input).val();
    $(input).next("span").html(upload);
});

Fiddle Здесь

webeno 21 март 2014, в 05:13

Ещё вопросы

Вы должны создать демо JSFiddle для него. Не только для того, чтобы получить лучшие ответы, но и чтобы вы сами смотрели на это из вашего текущего документа. Это мне очень помогает, пытаясь сделать простую демонстрацию, концентрируясь только на неисправных частях
@Namit Вы можете принять один из ответов как правильный;)

Vinay Pratap Singh · Accepted Answer · 2014-03-21T04-03-00.000Z

Проблема здесь в том, что jquery does not wait for you to finish the file selection here

Поэтому я добавил onChange method of your input type file

$('body').on("change", "#hidden", function (){
    var upload = $(this).val();
    $(this).next("span").html(upload);
});

Обновите динамический элемент, используя jQuery

2 ответа

Демо-скрипт

Ещё вопросы