通過jQuery爲表中的xmlhttprequest json數據生成輸入處理程序

我正在努力通過JSON數組動態生成按鈕。通過jQuery爲表中的xmlhttprequest json數據生成輸入處理程序

精簡代碼是這樣的（目的是建立基於數據表中，沒有什麼花哨的是，我還沒有精通此）：

$.ajax({ 
    /* type, content, etc. removed */ 
    success: function (data, textStatus, XmlHttpRequest) { 
     var target = $('myContainerDiv'); 
     var result = data.d.results; 

     var $table = $('<table />'); 
     for(var i=0;i < results.length; i++) { 
      var $row = $('<tr />'); 
      var $cell = $('<td />'); 
      var $button = $('<input />').attr({ type: 'button', value: 'Edit', name: 'btn' + i }); 
      $button.click(function() { 

       // ** 
       // In a .NET environment, this would become a closure 
       // I suspect this is the offending bit of code 
       // 

       alert(results[i].name); 

      }; 

      $cell.append($button); 
      $row.append($cell); 
      $table.append($row); 
     } 

     $target.append($table); 
    }, 
    /* error etc. removed*/ 
});

我基本上要裝滿一列按鈕，每個人都會彈出我從$.ajax調用中獲得的數組中的字段值。

按鈕實際上顯示，但它們不會對點擊作出反應，並且在F12工具控制檯中看不到運行時錯誤。這可能是由於這個腳本是Microsoft Dynamics CRM 2011解決方案的配置頁面的一部分，但除此之外，我確信AJAX調用繼續進行（我試圖使其打印出數據，而我可以看到它）。

UPDATE

引用i點擊處理程序中確實有問題的行：改變這樣的代碼做的事情工作，我期待：

var $button = $('<input />').attr({ type: 'button', value: 'Edit', name: 'btn' + results[i].name }); 
$button.click(function() { 
    // 'i' value is NOT what I thought it was ! 
    alert(this.name.substring(3,this.name.length)); 
    // I found out in the meanwhile that 'this' references the event source 
};

來源

2012-09-13 Alex

首先，你必須在你的代碼的幾個語法錯誤，它可能不會在所有運行：

如果您的div容器的ID是myContainerDiv，獲得目標您需要做$('#myContainerDiv')
您創建result varialbe，但您使用results變量
你不關閉parentesis在$button.click
您要添加的一切$target，但被定義爲target

現在實際的問題可能是，因爲你比如說關閉，請記住關閉變量而不關閉數值，所以當你執行按鈕點擊處理程序時，i的值爲results.length，所以你在那個時間之外。

你可以嘗試存儲results對象別處，提取您尋找來自按鈕（你命名然後'btn'+i），然後訪問name屬性，方式，對象的ID。

來源

2012-09-13 16:27:09 Jaime

而重寫代碼我有點搞砸的語法（無法複製粘貼，這是更長的警報和更長的名字......）。然而，關於'i'變量等於'results.length'的指出事實聽起來像是真正的問題。將檢查出來。 – Alex

在處理程序中擺脫了'i'，並開始工作。我將編輯這個問題來指出它。 – Alex

我注意到你沒有關閉.click（）括號。

嘗試...

$button.click(function() { 
    alert(results[i].name); 
});

來源

2012-09-13 16:24:29 Mulhoon

你可以試試這個...

$.ajax({ 
/* type, content, etc. removed */ 
success: function (data, textStatus, XmlHttpRequest) { 
    var $target = $('#myContainerDiv'), 
     results = data.d.results, 
     $table = $target.append('<table />').children('table:last-child'), $trSet = $([]); 
    for(var i=0; i < results.length; i++) { 
     $trSet = $trSet.add(
      $([ 
       '<tr><td>', 
       $('<input type="button" value="edit" name="btn'+i+'" rel="'+results[i].name+'" />').wrap('<div />').html(), 
       '</td></tr>' 
      ].join('')) 
     ); 
    }  
    // Using Event delegation ... Only one handler is attached to the DOM. 
    $table.append($trSet).click(function(e){ 
     var $t = $(e.target); 

     if($t.is('input[type="button"]')){ 
      alert($t.attr('rel')); 
     } 
     // choose to return false whether to prevent event bubbling up the DOM or not 
     // return false; 
    });  
    }, 
    /* error etc. removed*/ 
});

來源

2012-09-13 16:59:02 Stphane

通過jQuery爲表中的xmlhttprequest json數據生成輸入處理程序

回答

相關問題