привязка событий jQuery

Среда: JSF 1.2 RI, RichFaces 3.3.2

Мы используем jQuery для изменения классов CSS, когда элементы получают или теряют фокус. Это довольно прямолинейно, однако, когда наши частичные рендеры завершены, мы не видим эти события фокуса и размытия, привязанные к вновь визуализируемым элементам формы. Этого следовало ожидать, так как эти события не находятся в DOM после того, как документ готов, однако мы попытались использовать несколько плагинов (Listen и LiveQuery), поскольку .live() не работает должным образом для событий размытия и фокуса. ни в версии 1.3.2, ни в версии, поставляемой с RichFaces. Предполагается, что каждый из этих плагинов обрабатывает вновь созданные элементы, размещенные в документе. На практике, однако, ни один из них не ведет себя так, как ожидалось.

Мы оборачиваем наши input/selects/textareas в div или span, чтобы рендеринг различных фрагментов обновлялся по нашим Ajax-запросам. Это связано с ограничением в RichFaces, когда рендеринг элементов не проверяется при частичном повторном рендеринге. Кроме этого небольшого кусочка, ничего особенно интересного не происходит.

Я добавил элементы с помощью $('ol').after(txtForNewListItem) и подтвердил, что livequery правильно работает для этих элементов, но не для элементов, которые были недавно обработаны JSF.

Кто-нибудь имел аналогичные результаты и нашел подходящий обходной путь? Один метод, который я видел, состоял в том, чтобы переопределить document.createElement, но мы действительно надеемся избежать этого пути любой ценой.


person Scott    schedule 05.01.2010    source источник


Ответы (2)


Если я вас правильно понял, вы добавляете HTML-контент после того, как документ готов, используя $('ol').after(txtForNewListItem).

Так что вам нужно восстановить ваш список. Я делаю что-то подобное. Вот "псевдокод":

  ol.append(
     jQuery("<li/>")
     .attr("id", "someID")
     .append(jQuery("<span/>")
        .addClass("btnRemoveItem")
        .attr("title", "Remove item from list")
        .attr("id", data[i].id)
        .click(function() { alert('hello') })
      )
    .append("txtForNewListItem")
    );

Вам нужно немного поработать над этим кодом, но, надеюсь, он даст вам представление о том, что вам нужно сделать.

Ах ... нашел мою тему, где я получил ответ. Взгляните сюда: Не удалось привязать событие клика к вновь созданным элементам диапазона (jQuery)

person Steven    schedule 05.01.2010
comment
Элементы не добавляются в DOM через jQuery. Утверждая, что я добавил элемент в DOM с помощью метода append, я имел в виду, что я сделал это, чтобы проверить свою реализацию метода livequery, который работал. Проблема заключается в том, что когда элементы отображаются в первый раз с использованием жизненного цикла JSF, события livequery/listen не связываются должным образом. - person Scott; 06.01.2010
comment
Если $('ol').after(txtForNewListItem) работает, то и все остальные триггеры jQuery тоже должны работать. Я не знаю JSF. - person Steven; 06.01.2010

В RichFaces это встроено как rich:jQuery. составная часть. Установите атрибут селектора в соответствии с тем, что вы будете использовать в своем выражении jQuery. Установите запрос как функцию, которую вы хотите вызвать. Если вы перепривязываете элементы, которые были установлены при загрузке, вам также нужно будет назвать компонент, так как их DOM не будет проходить полный жизненный цикл повторного рендеринга, и не будет обновления.

 rich:jQuery id="focusEventBinder" selector="#arbitraryId" 
             query="focus(function () { jQuery(this).addClass('onfocus');});" 
             name="focusEventBinder"

Чтобы решить эту проблему, просто добавьте атрибут oncomplete к имени компонента rich:jQuery, который вы хотите вызвать. Итак, в приведенном выше примере нам нужно добавить это к нашему компоненту:

oncomplete="focusEventBinder();"
person Scott    schedule 06.01.2010
comment
интересно, решение собственного вопроса. - person Nix; 18.05.2010