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

Question

我是 jquery 手机新手。我正在尝试做一个动态拆分按钮列表视图。第一个按钮工作正常，这意味着单击它时，项目列表名称将传递给 "gotoQuantity(this)" 函数。但是，第二个按钮不起作用。那就是列表视图名称没有传递给 "deleteItemFromList(this)" 函数。

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

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移动增强列表时，拆分按钮文本被删除，然后添加为锚点的标题属性。所以你的快速修复是

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 移动动态拆分按钮列表视图

JQuery mobile dynamic split button list view

html

javascript

jquery

listview

jquery-mobile