Перемещение большого набора HTML-объектов на страницу и привязка событий с помощью jQuery - PullRequest
1 голос
/ 11 февраля 2010

У меня есть DIV со многими элементами, на которые можно кликать. У каждого свое уникальное событие. Этот DIV имеет режим «закрепления», когда он отображается в каком-то другом месте и в макете на странице, когда режим переключается.

Я должен отметить, что мой основной целевой браузер - IE8. Многие проблемы, с которыми я здесь сталкиваюсь (SSSLLLLLOOOOWWWWW), просто исчезают при тестировании на Chrome.

Я пытался использовать метод $ (...). Html () для перемещения содержимого HTML на новое место. Это работает, но события потеряны. Я могу использовать .live () вместо .bind () , но это делает все ответы о событиях примерно в 10 раз медленнее (помните, что в этом DIV есть МНОГИЕ элементы).

Еще одна вещь, которую я пробовал, - просто создавать контент в DIV и связывать события с обоими. Затем я могу переключить основной видимость DIV. Это сделало создание DOM намного медленнее, чем прежде (все еще мгновенно на Chrome, но не на IE).

Я ищу "классический" способ (если он существует) для выполнения этого перемещения контента на странице, сохраняя при этом события нетронутыми.

ОБНОВЛЕНИЕ Думайте об этом действии закрепления как о чем-то похожем на закрепление плавающего окна на одной стороне экрана в visual studio.

Ответы [ 3 ]

2 голосов
/ 11 февраля 2010

Если вы используете jquery 1.4, вы можете использовать detach :

Метод .detach () такой же, как и .remove (), за исключением того, что .detach () сохраняет все данные jQuery, связанные с удаленными элементами. Этот метод полезен, когда удаленные элементы должны быть повторно вставлены в DOM позднее.
<body>
    <div id='container1'>...elements with bound events...</div>
    <div id='container2'></div>
</body>
<script>
    var divs = $("#container1").children().detach(); // removes the node from the DOM
    $("#container2").empty().append(divs);
</script>

или используйте clone (true), если хотите, чтобы оба div-элемента отображались одновременно:

var divs = $("#container1").clone(true);
$("#container2").empty().append(divs);

О том, что $ .fn.live () слишком медленный:
Вы можете попробовать изменить «live», чтобы он был немного более эффективным, чтобы он работал следующим образом:

// $.live(selector,    context,         event,   fn);
   $.live("a.explode", "div.container", "click", function(){
       alert("boom"); return false;
   });

Что нужно сделать, это связать тип события с элементом контекста БЕЗ поиска элементов селектора в первую очередь. Не знаю, будет ли это полезно в вашем случае, но я подумал, что стоит упомянуть.

Чтобы еще больше ускорить процесс, вместо клика используйте mousedown:

$("a").mousedown(function(){
    // do stuff...
}).click(function(){return false;});
1 голос
/ 11 февраля 2010

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

Вот простой пример прослушивания события click внутри div и проверки, вызвал ли якорь его:

$("#container").click(function(e) {

  var $target = $(e.target);
  if ($target.is("a")) {
    // do some
  }

});
1 голос
/ 11 февраля 2010

Если вы беспокоитесь о медлительности, вы можете просто использовать css и переместить div в нужное вам место?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...