在JQuery動態點擊處理程序中使用Ajax回調變量值

Question

我正在做一個簡單的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>"); 
    } 
    }); 
} 

我不喜歡寫的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數組就可以了，但是我不知道它們中的哪一個是這個鏈接的正確值），但是我如何對任意長度的列表執行此操作？

下面是一個例子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]); 
}); 

而且我在這裏quess最後一個例子，「如果你需要原來的處理程序的情況下......」可能是什麼我想但我不知道如何到達那裏。我嘗試將當前的link_id值存儲到這個，從這個在應用函數中使用它（使用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 
     } 
    }); 
} 

Answer 2

所以，問題似乎越來越讓你的點擊處理程序可以訪問它與鏈接相關鏈接ID。請注意，如果它是字母數字，它將符合id屬性的條件，您可以從中提取它。如果它是純粹的數字，它將是一個非法的id屬性。在這種情況下，您可以使用像rel這樣的屬性或jQuery.data（）方法來將鏈接標識與鏈接一起存儲。你也可以通過使用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 = $("<li><a href='#'>" + item.name + "</a></li>"; 
link.data('identifier', link_id) 
    .click(function() { 
     alert($(this).data('identifier')); 
    }); 
list_area.append(link); 

Answer 3

試試這個：

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); 
     } 
    }); 
} 

使用多個追加導致瀏覽器連續重繪多次。你只想修改一次dom。