JSF + jQuery: рендеринг AJAX вызывает повторную привязку к событиям на стороне клиента (jQuery)

Question

Это повторяющаяся проблема для меня, и у меня есть решение, но оно немного грязное, и мне интересно, есть ли лучшее решение или каким-то образом, чтобы избежать проблемы вообще.

Эта проблема возникает, когдаЯ связываюсь с jQuery с компонентом DOM, а затем повторно визуализирую этот компонент, используя JSF / AJAX.

Например:

<h:commandButton>
  <f:ajax render="rerenderedObject" />
</h:commandButton>

<h:panelGroup id="rerenderedObject">
  ...
</h:panelGroup>

А на стороне jQuery:

var componentBound = false;
function bindToClick() {
   if (componentBound === false) {
      componentBound = true;
      $('#rerenderedObject').click(function() { 
        // DO SOMETHING 
      });
   }

}

Привязка к click теряется всякий раз, когда rerenderedObject перерисовывается(кнопка нажата)

Мне удалось преодолеть это путем привязки к JSF с использованием этого кода:

$(window).load(function () {
    jsf.ajax.addOnEvent(function(data){
        if (data.status === "success") {
            bindToClick();
        }
    });
});

И все же существует проблема множественных привязок событий (поскольку не каждый ajaxсобытие перерисовывает rerenderedObject), следовательно, переменная componentBound`.

Это мое решение, мне было интересно, приходилось ли кому-то с этим бороться и каково было ваше решение.

Спасибо!

Answer 1

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

$('#rerenderedObject').live('click', function() { 
    // DO SOMETHING 
});