javascript - jQuery移动动态分割按钮 ListView

Question

我是 jquery mobile 新手。我正在尝试做一个动态分割按钮 ListView 。第一个按钮工作正常，这意味着单击它时，项目列表名称将传递给“gotoQuantity(this)”函数。但是，第二个按钮不起作用。也就是说， ListView 名称没有传递给“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 Mobile 增强列表时，拆分按钮文本将被删除，然后添加为 anchor 的标题属性。所以你的快速解决办法是

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

但是，我会从注释中采用 SGA 的方法，并将项目 id 设为 LI 的数据属性，然后使用事件委托(delegate)来创建处理程序并检索 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