jquery - 我有两种方法在jquery中绑定(bind)数据，以便点击事件可以访问它，哪种方法最有效？

Question

大纲

我的简单应用程序从文本框中获取文本并使用 AJAX 调用 asp.net 页面方法。返回与该文本及其用户 ID 部分匹配的用户列表。我希望用每个结果的 DIV 填充页面上的现有 DIV，其中包含用户名。然后，每个 DIV 都需要绑定(bind)一个单击事件，该事件可以调用 javasacript 方法，然后该方法可以访问 key - 用户 ID。

代码

function SearchButtonHandler(event) {
    PageMethods.SearchInstructors($("#txtInstructorName").val(), SearchCallback);
    return false;
}

要搜索的文本被传递给 ajax 调用，SearchCallback 方法接收包含整数“UserID”和字符串“Fullname”的 json 对象数组。

这是我这样做的第一种方法，在 DIV 上创建一个“假”属性并让点击处理程序提取它:

function RowClicked() {
   alert($(this).attr("userid"));
}

function SearchCallback(data) {
    var collection = data.Result;

    if (collection.length == 0) { //tell the user there were none
        $("#resultlist").hide();
        $("#nonefound").show();
    } else {
        $("#nonefound").hide();
        $("#resultlist").empty();
        //method 1 below
        $.each(collection, function(index, item) {
            $("#resultlist").append($("<div></div>").html(item.FullName).attr("userid", item.UserID).click(RowClicked));
        });

        $("#resultlist").show();
    }
}

我不太喜欢创建“假”属性，但想出了以下方法:

        $("#resultlist").append($("<div></div>").html(item.FullName).click(function() {
            alert(item.UserID);
        }));

所以我有两种都可以正常工作的替代方案。

问题1:

第二个效率低吗？在我看来，它需要为每个 DIV 标签创建一个函数。或者还有其他方法吗？

问题 2(从 1 开始):

当点击事件被触发时，“item”在范围内如何？它显然有效，我只是看不出它如何在范围内!

Answer 1

您可以使用.data()和 $.data()存储自定义属性，如下所示:

.data("userid", item.UserID)

然后像这样获取它:

alert($(this).data("userid"));

或者，更高效一点(不创建额外的 jQuery 对象包装器):

alert($.data(this, "userid"));

这会将数据存储在页面上的 $.cache 中，您已经在元素上拥有自定义 $.expando 属性(用于存储也存在的点击处理程序) )，因此您没有添加任何无效内容，您只是使用已经创建的 Expando 数据缓存。

注意:上面的 $.expando 变量在 jQuery 1.4+ 变为“公共(public)”之前无法访问

<小时/>

在此处编辑并移动解释的切线部分:

您可以从元素中像这样调查 $.cache 对象(不要在代码中使用它!，如果您好奇/想戳一下):

$.cache[this[$.expando]]

这相当于$.data(this)，$.expando是页面加载时生成的属性，看起来像jQuery1281004831434 (jquery + 加载时间戳)这是添加到作为键的元素的属性，例如:jQuery1281004831434="4"，在这种情况下，缓存对象有一个名为 4 的条目 存储您的元素数据和事件...因为它是为您的点击处理程序创建的，如果您的目标是避免另一个自定义属性，您不妨使用它。