jQuery mobile - 如何在 <href> 和 Click 事件之间连接

jQuery mobile - how to connect between <a href> and the click event?

本文关键字：Click 连接 之间 事件 href mobile jQuery      更新时间：2023-09-26

我是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 函数在 document-ready 中调用。它通过检索到的 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"）;最终具有未定义

最好的办法是在 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"并查看控制台。

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

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

另外，为了解决您的其他问题，您应该使用类而不是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);
});

就像 ajax 默认是异步的一样，您有两个选择：

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

如果您告诉我们何时执行函数 initListByURL（） 可能会有所帮助。

在列表中的所有项都附加到文档后，应将事件绑定移动到成功函数中

    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 
    }
相关文章：