Каков рекомендуемый способ создания элемента HTML и привязки к нему слушателя с помощью jQuery?

Question

На данный момент я достигаю этого используя что-то вроде этого:

var myElem = "<tr id='tr-1'><td>content</td></tr>";
$("#myTable").append(myElem);
$("#tr-1").click(function() {
  // blah blah
});

Традиционно, когда я не использовал jQuery, я делал что-то вроде этого:

var myElem = document.createElement(...);
var myTable = document.getElementById("myTable");
myTable.appendChild(myElem);
myElem.onclick = function() {
  // blah blah
}

Дело в том, что во втором подходе у меня уже есть ссылка на myElem, и мне не нужно сканировать DOM ($("#tr-1")), чтобы найти его, подобно подходу jQuery, и, следовательно, он должен быть очень быстрее, особенно на больших страницах. Нет ли лучшего способа решения этой задачи с помощью jQuery?

Answer 1

Вы можете уменьшить / немного ускорить его следующим образом:

$("<tr id='tr-1'><td>content</td></tr>").click(function() {
 // blah blah
}).appendTo("#myTable");

Это устраняет необходимость находить элемент, а также вы имеете дело с фрагментом документа, пока вы на самом деле не вызовете.appendTo(), что значительно ускоряет выполнение операций DOM.

Существует также версия $(html, props) начиная с версии 1.4, которая не вполне работает для вашего примера, но в некоторых ситуациях она даже более краткая, которую вы можете проверитьвне.

Answer 2

использовать живые события. теперь, когда вы добавляете элемент в dom, событие live добавляется в новый элемент.

$(document).ready(function() {
  $("#tr-1").live("click", function() { 
    // blah blah 
  }); 
}

Answer 3

Просто "приведите" myElem в объект jQuery?

$(myElem).click(function() { ... });