jQuery event binding

Question

Environment: JSF 1.2 RI, RichFaces 3.3.2

We utilize jQuery for is to change CSS classes when items gain or lose focus. This is pretty straight forward, however when our partial renders are completed we are not seeing these focus and blur events bound to the newly rendered form elements. This is to be expected, as these events are not on the DOM upon the document ready, however we have attempted to utilize a couple of plugins (Listen as well as LiveQuery) since .live() does not function properly for blur and focus events in 1.3.2, nor in the version supplied with RichFaces. Each of these plugins is supposed to handle newly created items placed on the document. In practice though neither of these are behaving as expected.

We wrap our inputs / selects / textareas in a div or a span so that the rendering of various pieces is updated on our Ajax requests. This is due to a limitation in RichFaces where the rendering of items is not checked upon partial re-renders. Other than that small piece there is nothing too exciting occurring.

I have added items using $('ol').after(txtForNewListItem) and confirmed that livequery is correctly working for these items, just not for items which have been freshly rendered by JSF.

Anyone had similar results and found a suitable workaround? One method I did see was to override the document.createElement, but we really hope to have to avoid that path at all costs.

Answer 1

If I understand you right, you add HTML content after document ready, using $('ol').after(txtForNewListItem).

So you need to rebuild you list. I do something similar. Here is "pseudo" code:

  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")
    );

You need to work a bit on this code, but hopefully it gives you an idea of what you need to do.

Ah... found my thread where I got the answer. Take a look here: http://stackoverflow.com/questions/954687/not-able-to-bind-click-event-to-newly-created-span-items-jquery

Answer 2

RichFaces has this built in as the rich:jQuery component. Set the selector attribute as to what you would use within your jQuery statement. Set the query to be the function you wish to call. If you are rebinding elements which were set on load then you will need to name the component as well, as they DOM will not go through the full re-rendering lifecycle, and there will be no update.

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

To resolve this simply have your component have an oncomplete attribute to the name of the rich:jQuery component you wish to call. So in the example above we would need to add this to our component:

oncomplete="focusEventBinder();"