代码之家 › 专栏 › 技术社区 › Neil Trodden

我有两种方法在jquery中绑定数据,以便click事件可以访问它,哪种方法最有效?

jquery

Neil Trodden · 技术社区 · 14 年前

轮廓

我的简单应用程序从文本框中获取文本,并使用AJAX调用asp.net页面方法。将返回部分匹配该文本及其用户标识的用户列表。我希望在页面上的现有DIV中为每个结果填充一个DIV,其中包含用户名。然后,每个DIV需要一个click事件绑定到它,该事件可以调用javasacript方法,然后该方法可以访问键userID。

代码

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

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开始):

当click事件被触发时,“item”在作用域中是怎样的?很明显,我就是看不出这是怎么回事!

3 回复 | 直到 14 年前

Nick Craver 14 年前

你可以用 .data() 和 $.data() 要存储自定义属性,如下所示:

.data("userid", item.UserID)

然后像这样取:

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

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

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

$.cache 在页面上,您已经有了自定义 $.expando 属性(用于存储也在那里的click处理程序),因此您不会添加任何无效的内容,您只是使用已经创建的expando数据缓存。

注:以下为 $.expando公司 在jQuery1.4+公开之前,上面的变量是不可访问的

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

你可以调查 $。缓存

$.cache[this[$.expando]]

这相当于 $.data(this) , 是页面加载时生成的属性,类似于 jQuery1281004831434 (jquery+timestamp-on-load)这是添加到元素中的一个属性,它是一个键,例如: jQuery1281004831434="4" ,在这种情况下,缓存对象有一个名为 4 它存储了元素、数据和事件……因为这已经是为您的单击处理程序创建的,所以您最好使用它 另一个 自定义属性是您的目标。

Kristoffer Sall-Storgaard ProllyGeek 14 年前

我可以推荐第三条路吗? jQuery.data()

基于您的第一个想法:

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).data("userid", item.UserID).click(RowClicked));
        });

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

Tomalak 14 年前

有jQuery数据,就像其他人说的。

第二个效率低吗?它在我看来,它需要创造一个每个DIV标签的函数。

您没有为每个DIV标记创建新函数。他们得到的都一样。这个 click() 函数将完全相同的函数对象绑定到所有匹配元素的click事件。

同样的情况也发生在 each()

还有,我进入“物品”,到底是怎么回事即使在范围内?

这个 item 变量-就像你怀疑的-不在范围内。这个 this

$("#resultlist div").click(function() {
  alert(this.UserID);
});