Question

目前我遇到了jquerymobile中的问题：我正在动态地将项添加到列表中并最终使用enhanceWithin（）（因此样式是正确的）。在此之后我喜欢为每个列表项添加click事件，但问题是，enhanceWithin是异步运行的，所以我总是得到错误消息“无法在初始化之前调用checkboxradio上的方法;尝试调用方法'刷新'”

当我延迟事件添加代码时，它可以完美运行。

是否有人知道是否存在enhanceWithin.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();
    });
}

Answer 1

奥马尔使用事件委托的建议应该适合你。在下面的示例中，我在pagecreate上调用updatelist以初始创建复选框。然后我使用事件委托（on（））在shoppinglist 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

使用jquerymobile中的事件添加动态内容

1 个答案: