Javascript 在JQuery动态单击处理程序中使用Ajax回调变量值

我正在做一个简单的ajax查询，它检索一个可变长度的值列表作为JSON数据。我试图根据这些数据创建一个列表，其中包含基于JSON查询值的单击函数。我可以通过如下方式将onClick方法写入HTML来实现这一点：

function loadFooList() {
    var list_area = $("#sidebar");
    list_area.html("<ul>")
    $.ajax({
    type: 'GET',
        url:'/data/foo/list',
    dataType: 'json',
    success: function (json) {
        $.each(json, function(i, item) {
        var link_id = "choosesfoo" + item.id;
        list_area.html(list_area.html()
                   + "<li> <a href='#' onClick='alert(\"" + 
                   link_id + "\");'>" + 
                   item.name + "</a></li>");
        });
        list_area.html(list_area.html() + "</ul>");
    }
    });
}

我想问最后一个例子，“如果你需要原始处理程序的上下文…”可能是我想要的，但我不知道确切的方法。我试图将当前link_id值存储到this，在应用的函数中从this使用它（使用apply（）），但没有成功。根据FireFox，必要的值仍然没有定义。我正在使用jquery1.3.2

---

那么，对于这个相对基本的问题，正确的解决方案是什么呢？

使用

append

而不是

html（）

：

函数loadWighList（）{
var ul=$（“
”）；
$.ajax({
键入：“GET”，
url:“/data/foo/list”，
数据类型：“json”，
成功：函数（json）{
$.each（json，函数（i，项）{
var link_id=“choosesfoo”+item.id；
var a=$（''）.attr（'href'，'#'）.bind（'click'，函数（e）{
警报（链接标识、项目名称）；
e、 预防默认值（）；
});
$（“
”）.append（a）.appendTo（ul）；
});
ul.appendTo（“#侧边栏”）；//这就是DOM注入发生的地方
}
});
}

使用

追加

而不是

html（）

：

函数loadWighList（）{
var ul=$（“
”）；
$.ajax({
键入：“GET”，
url:“/data/foo/list”，
数据类型：“json”，
成功：函数（json）{
$.each（json，函数（i，项）{
var link_id=“choosesfoo”+item.id；
var a=$（''）.attr（'href'，'#'）.bind（'click'，函数（e）{
警报（链接标识、项目名称）；
e、 预防默认值（）；
});
$（“
”）.append（a）.appendTo（ul）；
});
ul.appendTo（“#侧边栏”）；//这就是DOM注入发生的地方
}
});
}

因此，问题似乎是获取与链接关联的链接id，以便您的单击处理程序能够访问它。请注意，如果它是字母数字的，它将符合id属性，您可以从中提取它。如果它是纯数字，则它将是非法的id属性。在这种情况下，您可以使用属性（如rel）或jQuery.data（）方法来存储链接id和链接。您还可以通过使用append来简化。我将展示这两个例子

var link = $("<li><a href='#' id='" + link_id + "'>" + item.name + "</a></li>";
link.click( function() {
         alert( $(this).attr('id') );
     });
list_area.append(link);

var-link=$（“
”；
link.click（函数（）{
警报（$（this.attr（'id'））；
});
列表_区域。追加（链接）；

或（如果是数字）

var-link=$（“
”；
link.data（'identifier'，link\u id）
。单击（函数（）{
警报（$（this.data（'identifier'））；
});
列表_区域。追加（链接）；

因此，问题似乎是获取与链接关联的链接id，以便您的单击处理程序可以访问它。请注意，如果它是字母数字，则符合id属性的条件，您可以从中提取它。如果它是纯数字，则它将是非法的id属性。在这种情况下，您可以使用属性，如rel、 或者使用jQuery.data（）方法来存储链接id和链接。您也可以通过使用append来简化。我将展示这两个示例

var link = $("<li><a href='#' id='" + link_id + "'>" + item.name + "</a></li>";
link.click( function() {
         alert( $(this).attr('id') );
     });
list_area.append(link);

var-link=$（“
”；
link.click（函数（）{
警报（$（this.attr（'id'））；
});
列表_区域。追加（链接）；

或（如果是数字）

var-link=$（“
”；
link.data（'identifier'，link\u id）
。单击（函数（）{
警报（$（this.data（'identifier'））；
});
列表_区域。追加（链接）；

试试这个：

function loadFooList() {
    var list_area = $("#sidebar");
    $.ajax({
        type: 'GET',
        url:'/data/foo/list',
        dataType: 'json',
        success: function (json) {
            var out = '<ul>';
            $.each(json, function(i, item) {
                var link_id = "choosefoo" + item.id;
                out +="<li><a href='#' id='" + link_id  + "'>"+item.name+"</a></li>";
            });
            out +="</ul>"
            var $out = $(out);
            $out.find('a').click(function(){
                var link_id = this.id;
                var item_name = $(this).text();
                alert(link_id);
                alert(link_name);
            })
            list_area.html($out);
        }
    });
}

函数loadWighList（）{
风险值列表面积=$（“#侧栏”）；
$.ajax({
键入：“GET”，
url:“/data/foo/list”，
数据类型：“json”，
成功：函数（json）{
var out='
'；
$.each（json，函数（i，项）{
var link_id=“choosefoo”+item.id；
out+=“
”；
});
out+=“
”
var$out=$（out）；
$out.find（'a'）。单击（函数（）{
var link_id=this.id；
var item_name=$（this）.text（）；
警报（链接标识）；
警报（链接名称）；
})
list_area.html（$out）；
}
});
}

使用多个附录导致浏览器在一行中多次重画。您只想修改dom一次。

尝试以下操作：

function loadFooList() {
    var list_area = $("#sidebar");
    $.ajax({
        type: 'GET',
        url:'/data/foo/list',
        dataType: 'json',
        success: function (json) {
            var out = '<ul>';
            $.each(json, function(i, item) {
                var link_id = "choosefoo" + item.id;
                out +="<li><a href='#' id='" + link_id  + "'>"+item.name+"</a></li>";
            });
            out +="</ul>"
            var $out = $(out);
            $out.find('a').click(function(){
                var link_id = this.id;
                var item_name = $(this).text();
                alert(link_id);
                alert(link_name);
            })
            list_area.html($out);
        }
    });
}

函数loadWighList（）{
风险值列表面积=$（“#侧栏”）；
$.ajax({
键入：“GET”，
url:“/data/foo/list”，
数据类型：“json”，
成功：函数（json）{
var out='
'；
$.each（json，函数（i，项）{
var link_id=“choosefoo”+item.id；
out+=“
”；
});
out+=“
”
var$out=$（out）；
$out.find（'a'）。单击（函数（）{
var link_id=this.id；
var item_name=$（this）.text（）；
警报（链接标识）；
警报（链接名称）；
})
list_area.html（$out）；
}
});
}

---

使用多个附件导致浏览器在一行中多次重画。您只想修改dom一次。

您正在大量修改dom。每次修改dom时，浏览器都必须重画，如果返回的json列表很长，这将大大降低速度。@Petersendiit:很公平，只需等待ul注入，直到收到请求为止如果您担心性能，则执行此操作。您正在大量修改DOM。每次修改DOM时，浏览器都必须重新绘制，如果返回的json是一个长列表，这将大大降低速度。@p

var link = $("<li><a href='#'>" + item.name + "</a></li>";
link.data('identifier', link_id )
    .click( function() {
         alert( $(this).data('identifier') );
     });
list_area.append(link);

function loadFooList() {
    var list_area = $("#sidebar");
    $.ajax({
        type: 'GET',
        url:'/data/foo/list',
        dataType: 'json',
        success: function (json) {
            var out = '<ul>';
            $.each(json, function(i, item) {
                var link_id = "choosefoo" + item.id;
                out +="<li><a href='#' id='" + link_id  + "'>"+item.name+"</a></li>";
            });
            out +="</ul>"
            var $out = $(out);
            $out.find('a').click(function(){
                var link_id = this.id;
                var item_name = $(this).text();
                alert(link_id);
                alert(link_name);
            })
            list_area.html($out);
        }
    });
}