javascript - 在 JQuery 动态点击处理程序中使用 Ajax 回调变量值

Question

我正在执行一个简单的 ajax 查询，它以 JSON 数据的形式检索可变长度的值列表。我正在尝试根据此数据创建一个列表，该列表具有基于从 JSON 查询获取的值的点击功能。我可以通过将 onClick-methods 写入 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>");
    }
    });
}

我不喜欢将 onClick 函数写入 HTML，而且我还想了解如何通过 JQuery 点击函数创建相同的功能。

所以问题显然是变量作用域。我在这里的天真的尝试显然不会起作用，因为当点击发生时变量不再存在:

function loadFooList2() {
    var list_area = $("#sidebar");
    var link_ids = Array();
    list_area.html("<ul>")
    $.ajax({
    type: 'GET',
        url:'/data/foo/list',
    dataType: 'json',
    success: function (json) {
        $.each(json, function(i, item) {
        var link_id = "choosefoo" + item.id;
        list_area.html(list_area.html()
                   + "<li> <a href='#' id='" + link_id  + "'>"+item.name+"</a></li>");
        link_ids.push(link_id);
        });
        list_area.html(list_area.html() + "</ul>");
        for (link_index=0; link_index<link_ids.length; link_index++) {
        $("#" + link_ids[link_index]).click(function() {
            alert(link_ids[i]); 
        });
        }
    }
    });
}

显然，我想做的不仅仅是提醒该值，但只要我能够使其正常工作并继续前进，警报调用就会存在。

我知道我必须创建某种处理函数来向其传递状态变量。这适用于单个值(我可以很好地存储整个 link_ids 数组，但我不知道其中哪个是该链接的正确值)，但是对于任意长度的列表我将如何执行此操作？ p>

这是一个示例 from JQuery docs我正在尝试复制:

 // get some data
 var foobar = ...;

 // specify handler, it needs data as a paramter
 function handler(data) {
   //...
 }

 // add click handler and pass foobar!
 $('a').click(function(){
   handler(foobar);
 });

 // if you need the context of the original handler, use apply:
 $('a').click(function(){
   handler.apply(this, [foobar]);
 });

我想问这里的最后一个例子，“如果你需要原始处理程序的上下文......”可能就是我想要的，但我不知道到底如何到达那里。我尝试将当前的 link_id 值存储到 this 中，并在应用函数中从 this 使用它(使用 apply())，但没有成功。根据 FireFox 的说法，必要的值仍未定义。我正在使用 JQuery 1.3.2。

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

Answer 1

使用append代替html():

function loadFooList() {
    var ul = $('<ul>');
    $.ajax({
        type: 'GET',
        url:'/data/foo/list',
        dataType: 'json',
        success: function (json) {
            $.each(json, function(i, item) {
                var link_id = "choosesfoo" + item.id;
                var a = $('<a>').attr('href','#').bind('click', function(e) {
                    alert(link_id,item_name);
                    e.preventDefault();
                });
                $('<li>').append(a).appendTo(ul);
            });
            ul.appendTo('#sidebar');  // this is where the DOM injection happens
        }
    });
}