jQuery построить таблицу с событиями

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>

Все выглядит хорошо для меня ... но онклик даже не срабатывает .... есть идеи, как это исправить?Спасибо

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-код в виде строки и вставить все сразу.Это значительно уменьшает количество перерисовок, необходимых браузеру.