Question

我是jquery mobile的新手。我试图做一个动态的拆分按钮列表视图。第一个按钮工作正常，这意味着单击它时，项目列表名称将传递给＆＃34; gotoQuantity（this）＆＃34;功能。但是，第二个按钮不起作用。也就是说列表视图名称没有传递给＆＃34; deleteItemFromList（this）＆＃34;功能。

请问我该如何解决这个问题？

HTML：

<ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true" id = itemsList data-split-icon="delete">
</ul>

脚本：

function loadMainList() {
    //loads main items list
    $("#itemsList").empty();
    for (var key in mainList) {
        itemToList = key;

        $('#itemsList').append('<li><a onclick="gotoQuantity(this)">' + itemToList + '</a><a onclick="deleteItemFromList(this)">' + itemToList + '</a></li>');
    };
    $("#itemsList").listview('refresh');
}

function gotoQuantity(obj) {
    alert($(obj).text());
}

function deleteItemFromList(obj) {   //deletes item from main list
    alert($("#itemsList").text());
}

Answer 1

当jQuery Mobile增强列表时，拆分按钮文本将被删除，然后添加为锚点的title属性。所以你的快速修复将是

function deleteItemFromList(obj) {   //deletes item from main list
    alert($(obj).prop('title'));
}

但是，我会从评论中采用SGA的方法，并使项目ID成为LI的数据属性，然后使用事件委托创建处理程序并检索id：

$("#itemsList").empty();
for (var i=0; i<mainList.length; i++) {
    itemToList = mainList[i];
    $('#itemsList').append('<li data-id="' + itemToList + '"><a href="#" class="goQuant">' + itemToList + '</a><a href="#" class="deleteItem">' + itemToList + '</a></li>');
};
$("#itemsList").listview('refresh');

$("#itemsList").on("click", ".goQuant", function(){
  alert($(this).parent("li").jqmData("id"));
});
$("#itemsList").on("click", ".deleteItem", function(){
  alert($(this).parent("li").jqmData("id"));
});

<强> DEMO

JQuery移动动态拆分按钮列表视图

1 个答案: