javascript - jQuery mobile - 如何连接和点击事件？

Answer 1

您最好的选择是在li元素内创建自定义数据属性，以便稍后访问。将您需要的数据推送到这些自定义属性。例子：

items.push('<li id="cat_li_'+i+'" data-custom-cool="' + elem.someData + '"><a href="#places">' + elem.name + '</a></li>');

现在，您可以this在单击处理程序中根据需要提取数据。

$(this).data("custom-cool"); //this is equiv to elem.someData .

或者，如果您有更大的数据，您可以使用 $.data 元素存储对象：

$.each(data, function(i, elem) {
            items.push('<li id="cat_li_'+i+'"><a href="#places">' + elem.name + '</a></li>');
        });
    id.html(items).listview('refresh');
    var element = $("#cat_li_" + i)[0]; //cant use jQ object
    $.data(element, "object", elem); //assign object
});

现在您的点击处理程序应该能够像这样访问对象（在处理程序内部）：

console.log($.data(this, "object").objProperty); //replace objProperty with your property to get.

演示： http: //jsfiddle.net/tymeJV/vx8Xt/1/点击“testdiv”并查看控制台。

Answer 2

我认为问题在于id.html(items),.html()不接受数组。

id.html(items.join('')).listview('refresh');

另外要解决您的其他问题，您应该使用 classes 而不是 ids ：

function initListByUrl(id, requestUrl) {
    $.getJSON(requestUrl, function(data) {
        var items = []
        $.each(data, function(i, elem) {
                items.push('<li class="cat"><a href="#places">' + elem.name + '</a></li>');
            });
        id.html(items).listview('refresh');
    });
}


$(document).on("click", '.cat a', function(event, ui) {
    console.log(3);
});

Answer 3

Answer 4

在列表中的所有项目都附加到 Document 之后，您应该将事件绑定移动到成功函数中

    success: function(data) {
    var items = []
        $.each(data, function(i, elem) {
            items.push('<li id="cat_li_'+i+'"><a href="#places">' + elem.name + '</a></li>');
        });
        id.html(items).listview('refresh');
        // move your click event handling here 
    }