Как я могу назначить обработчик событий для объектов страницы, используя ajax и UJS - PullRequest
Новая
       4

Как я могу назначить обработчик событий для объектов страницы, используя ajax и UJS

0 голосов
/ 09 сентября 2010

Может кто-нибудь посоветует хороший подход к этой проблеме:

При загрузке страницы обработчик событий добавляется к элементу страницы.Например: 

// Javascript
// when page is loaded...
jQuery(document).ready(function) {
  // assign this handler to the buttonDiv element...
  jQuery("#buttonDiv").click(function() {
    // to alert "hello"
    alert("hello");
  });
}


// HTML 5
<div id="buttonDiv">Click me </div>

Это работает как ожидалось - БОЛЬШОЙ!

Но предположим, что div#buttonDiv не присутствовал при загрузке документа и добавлялся в DOM позже с использованием Ajax.В этом случае обработчик событий click() не добавляется и оповещение не вызывается.

Как добавить обработчик событий к этому элементу без использования встроенного JavaScript?

Любойпредложения приветствуются.

1 Ответ

1 голос
/ 09 сентября 2010

Вот для чего .live() :) Вот так: 

jQuery(function) {
  jQuery("#buttonDiv").live("click", function() {
    alert("hello");
  });
});

.live() не добавляет обработчик событий, когда элемент действительно добавляется, но добавляет обработчик событий в document при его запуске и прослушивает click события, которые всплывают вверх. Поскольку старые и новые элементы всплывают одинаково ... неважно, когда они были добавлены, обработчик click все еще работает, пока совпадает селектор.

Существует также аналогичный .delegate() (который даже использует .live() внутри), который вы можете использовать, если знаете, что кнопка будет внутри определенного контейнера, скажем вы перезагружая контейнер #content через AJAX, это выглядело бы так: 

jQuery(function) {
  jQuery("#content").delegate("#buttonDiv", "click", function() {
    alert("hello");
  });
});

Это добавляет, что прослушиватель для всплывающих событий на #content, который просто сохраняет несколько пузырьков, прежде чем поймать его, в отличие от того, чтобы он прошел до document ... на практике либо все в порядке, и вы не можете расскажите разницу в производительности, если вы не используете обработчики событий ton из .live().

...