Question

我刚刚开始使用jQuery并希望将ajax调用的结果放入表中...我编写了以下函数（测试不是实际的）

 function AjaxSucceeded(result) {
           $("#pageLabel").html('');
           $("#pageLabel").append($("<table>").attr("id", "outputTable").append($('<tbody>')));

           $.each(result.d, function(i, item) {
               $("#outputTable").find('tbody')
                    .append($('<tr>')
                    .attr('onclick', "clientSideInclude('pageLabel','http://wwww.microsoft.com');")
           .append($('<td>')
           .attr('colspan', "2")
           .text(item.Description)
           )
           );

           });
           //** Clean up before we leave
           $('#loadDiv').removeClass('Loading').addClass('notLoading');
       };

产生以下输出

<tbody><tr onclick="clientSideInclude('pageLabel','http://wwww.microsoft.com')"><td colspan="2">Test Page                                                                                           </td></tr><tr onclick="clientSideInclude('pageLabel','http://wwww.microsoft.com')"><td colspan="2">Test Page 2                                                                                         </td></tr></tbody>

对我来说一切看起来都不错......但onclick甚至没有开火....任何想法如何解决这个问题？感谢

Answer 1

试试这个：

function AjaxSucceeded(result) {

  $("#pageLabel").empty();

  var table = $('<table id="outputTable"><tbody></tbody></table>'),
      reftBody = $(table).find('tbody');

  $.each(result.d, function(i, item) {

      var 
          // td
          td = $('<td>')
                 .attr('colspan', "2")
                 .text(item.Description),
          // tr
          tr = $('<tr>')
                 .bind('click', {pageLabel: 'pageLabel', link: 'http://wwww.microsoft.com'}, function(event) {

                    clientSideInclude(event.data.pageLabel, event.data.link);

                 })
                 .append(td);     
      // append tr
      $(reftBody).append(tr);

   });

   // append table with tbody
   $("#pageLabel").append(table);

   //** Clean up before we leave
   $('#loadDiv').removeClass('Loading').addClass('notLoading');
};

Answer 2

试试这个：

.append($('<tr onclick="...">')

将HTML作为字符串构建并立即插入整个内容也更有效。它大大减少了浏览器需要执行的重绘次数。

jQuery构建表与事件

2 个答案: