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对象构建列表视图。

如果我在点击事件的上下文中有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，“object”）; 最终有未定义的

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');

另外，为了解决您的其他问题，您应该使用类而不是ID：

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

默认情况下，ajax是异步的，您有两个选择：

您可以通过将选项 async 切换为false来使ajax请求同步 - 有关详细信息，请参阅jQuery.ajax() API
您可以将elem保存在全局变量中，并在onclick-handler

如果你告诉我们，当执行函数initListByURL（）时，也许它会有所帮助。

Answer 4

在将列表中的所有项目附加到Document

之后，您应该将事件绑定移动到success函数中

    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 
    }

jQuery mobile - 如何在<a href=""> and the click event?</a>之间建立联系

编辑2

4 个答案: