Добавление динамического контента с событиями в jquerymobile

Question

Добавление динамического контента с событиями в jquerymobile

0

В настоящее время я столкнулся с проблемой в jquerymobile: я добавляю элементы в список динамически и в конце концов использую boostWithin() (поэтому стиль правилен). После этого мне нравится добавлять клики-события для каждого элемента списка, но проблема в том, что boostWithin работает асинхронно, поэтому я всегда получаю сообщение об ошибке "не может вызывать методы на checkboxradio до инициализации, попытался вызвать метод" refresh ""

Когда я задерживаю код добавления событий, он отлично работает.

Кто-нибудь есть идея, если есть событие boostWithin.done или что-то еще, что я могу использовать?

HTML:

...
<div id="shoppinglist">Loading list...</div>
...

Javascript:

function updateList()
{
    var result = "";

    $.each(shoppinglistItems, function (index, item) {
        result += '<label><input type="checkbox" ' + item.checked + ' id="item_' + item.id + '">' + item.name + '</label>\n';
    });

    $('#shoppinglist').html(result).enhanceWithin();

    // Change-Events an die Checkboxen knoten
    $('input[id*=item_]').unbind('change').bind('change', function (event) {
        var itemid = $(this).attr('id');
        itemid = (itemid.split('_'))[1];    // Nur die Zahl extrahieren
        // Passendes Item aus der Liste der Items suchen und checken
        $.each(shoppinglistItems, function (index, item) {
            if (item.id == itemid)
            {
                item.checked = "checked";
                item.timestamp = moment().format("YYYYMMDDHHmmss");
            }
        });
        updateList();
    });
}

Christian Waidner 24 май 2014, в 21:15

Источник

0

Добавьте код, чтобы прояснить проблему.
Omar 24 май 2014, в 19:03
0

Добавлен код, надеюсь, это поможет
Christian Waidner 24 май 2014, в 19:44
0

Измените этот $('input[id*=item_]').unbind('change').bind('change', function (event) { на этот $(document).on('change', 'input[id*=item_]', function (event) {
Omar 24 май 2014, в 20:17
0

Еще раз спасибо, но все равно выдает ту же ошибку. Есть другие идеи?
Christian Waidner 25 май 2014, в 07:55
0

Вы используете .checkboxradio("refresh") ?
Omar 25 май 2014, в 08:28
0

Нет, только код, размещенный выше. Я изменил JS-код и добавил свою функцию, чтобы она стала понятнее.
Christian Waidner 25 май 2014, в 12:12

Показать ещё 4 комментария

Теги:

javascript

jquery

jquery-mobile

1 ответ

Ещё вопросы

Добавьте код, чтобы прояснить проблему.
Добавлен код, надеюсь, это поможет
Измените этот $('input[id*=item_]').unbind('change').bind('change', function (event) { на этот $(document).on('change', 'input[id*=item_]', function (event) {
Еще раз спасибо, но все равно выдает ту же ошибку. Есть другие идеи?
Нет, только код, размещенный выше. Я изменил JS-код и добавил свою функцию, чтобы она стала понятнее.

ezanker · Answer 1 · 2014-05-26T19-32-00.000Z

Рекомендации Омара по использованию делегирования событий должны работать на вас. В моем примере ниже я вызываю updatelist на pagecreate, чтобы сначала создавать флажки. Затем я использую делегирование событий (on()) для создания обработчика изменений на любых входах в списке покупок DIV, независимо от того, существуют они прямо сейчас или нет. строка $ ("# shoppinglistItemsCont"). html (JSON.stringify(shoppinglistItems)); просто печатает содержимое объекта на экране, чтобы вы могли видеть его изменение.

$(document).on("pagecreate", "#page1", function(){

    $("#shoppinglistItemsCont").html(JSON.stringify(shoppinglistItems));
    updateList();

    $("#shoppinglist").on("change", "input[id*=item_]", function(event){
        var itemid = $(this).attr('id');
        itemid = (itemid.split('_'))[1];    // Nur die Zahl extrahieren
        // Passendes Item aus der Liste der Items suchen und checken
        $.each(shoppinglistItems, function (index, item) {
            if (item.id == itemid)
            {
                item.checked = "checked";
                item.timestamp = moment().format("YYYYMMDDHHmmss");                
            }
        });
        updateList();    
        $("#shoppinglistItemsCont").html(JSON.stringify(shoppinglistItems));
    });

});


function updateList()
{
    var result = "";
    $.each(shoppinglistItems, function (index, item) {
        result += '<label><input type="checkbox" ' + item.checked + ' id="item_' + item.id + '">' + item.name + '</label>\n';
    });

    $('#shoppinglist').html(result).enhanceWithin();
}

Вот работая DEMO

Спасибо, что нашли время, чтобы создать этот пример. И да, это работает для меня, как вы сказали. Моя проблема в том, что список обновляется, когда элемент проверяется (проверенные элементы сортируются), а затем перерисовывается с помощью updatelist (). При первом создании списка все работает хорошо (как в вашем примере). Как только список был изменен нажатием на элемент, выдается ошибка.
@ChristianWaidner, вы можете обновить мою скрипку, чтобы ошибка произошла?
Я изменил предоставленную вами скрипту и добавил функцию сортировки, которую я использую => теперь выдается ошибка. По сути, я хочу создать список покупок, в котором отсортированные товары будут отсортированы. Большое спасибо за вашу постоянную поддержку в этом.
@ChristianWaidner, после изменения скрипки, нажмите обновить, а затем опубликуйте новый адрес ссылки здесь.
Извините @ezanker за то, что вы полный нуб. Я подумал, что достаточно щелкнуть обновить, чтобы ваш исходный код был обновлен. Новая ссылка jsfiddle.net/8LKte/2 , я добавил свой вид, чтобы прояснить это.
@ChristianWaidner, я запускаю вашу скрипку в Chrome Ver 35, и она отлично работает (каждый раз, когда я нажимаю на элемент, список обращается с непроверенными элементами вверху). Возможно, вы видите проблемы в конкретном браузере?
Я также использую Chrome 35, и технически это работает (курорт и т. Д.). Но когда я открываю консоль JS (F12), я получил упомянутое сообщение об ошибке, и я просто хочу знать, что я могу сделать, чтобы предотвратить это, чтобы избежать будущих проблем.
Я вижу ошибку в консоли. Я не знаю, что вызывает это, или как избежать этого.