javascript - jQuery mobile - 如何连接 <a href> 和点击事件？

Question

我是 jQuery 和 jQuery mobile 的新手。

我遵循了一些示例和文档并创建了以下代码:

function initListByUrl(id, requestUrl) {
$.ajax({
    url: requestUrl,
    type:'GET',
    dataType:'json',
    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');
    }

});
}


$(document).on("click", '[id^=cat_li]', function(event, ui) {
  console.log(3);
 })

我需要在点击事件的上下文中使用 $.ajax 中的 elem 事件

这是因为 elem 对象包含一个在单击该项目时相关的字段。

我该怎么做？

编辑

只是为了澄清。

initListByUrl 函数在文档就绪时调用。它通过检索到的包含数组的 json 对象构建一个 ListView 。

如果我在点击事件的上下文中有 elem，我会做这样的事情:

$(document).on("click", '[id^=cat_li]', function(event, ui) {
    call_some_function(elem.someField);
 })

我的问题是如何在单击事件的范围内拥有适当的 elem 对象？

编辑2

这是我的完整代码:

var stack = []

var site_url = 'http://localhost:3000';
$(function() {


    initCategoriesList();

    $("#places").on('pageinit', function() {
        var category = stack.pop();
        initPlacesList(category);
    });

    $("#place").on('pageinit', function() {

    });


});


function initCategoriesList(id, requestUrl) {
    $.ajax({
        url: site_url + '/categories',
        type:'GET',
        dataType:'json',
        success: function(data) {
            var items = []
            $.each(data, function(i, elem) {
                items.push('<li id="cat_li_'+i+'"><a href="#places">' + elem.name + '</a></li>');
            });
            $("#categories_ul").html(items).listview('refresh');
        }

    });
}

function initPlacesList(category_id) {
    $.ajax({
        url: site_url + '/business_places/category/' + category_id,
        type:'GET',
        dataType:'json',
        success: function(data) {
            var items = []
            $.each(data, function(i, elem) {
                items.push('<li id="place_li_'+i+'"><a href="#place">' + elem.name + '</a></li>');
                $("#places_ul").html(items).listview('refresh');
                var element = $("#place_li_" + i)[0]; 
                $.data(element, "object", elem); 
            });
            $("#places_ul").html(items).listview('refresh');

        }

    });

}

$(document).on("click", '[id^=cat_li]', function(event, ui) {
    stack.push(event.target.innerText);
})


$(document).on("click", '[id^=place_li]', function(event, ui) {
    var place = $.data(this, "object");
        alert(place.name);
    })

var place = $.data(this, "对象"); 最终未定义

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”并查看控制台。