JQuery event binding

Question

Environment: JSF 1.2 RI, RichFaces 3.3.2

We use jQuery for to change CSS classes when elements gain or lose focus. This is fairly straightforward, however, when our partial renderings are completed, we do not see these tricks and blurry events associated with the newly created form elements. This is to be expected, since these events are not in the DOM according to the document, but we tried to use a couple of plug-ins (Listen, as well as LiveQuery), since .live () does not work properly for blurring and focus in 1.3.2, and also in the version that comes with RichFaces. Each of these plugins must process newly created elements placed in the document. In practice, although not one of them behaves as expected.

We transfer our inputs / select / textareas to div or span so that the rendering of the various parts is updated according to our Ajax requests. This is due to a limitation in RichFaces when the rendering of elements is not checked with partial re-rendering. Apart from this little piece, nothing interesting happens.

I added elements using $ ('ol') after (txtForNewListItem) and confirmed that livequery works correctly for these elements, and not for elements that were recently displayed by JSF.

Has anyone had similar results and found a suitable workaround? One of the methods I saw was to override document.createElement, but we really hope that you will have to avoid this path at all costs.

Answer 1

RichFaces has a rich: jQuery built-in component. Set the selector attribute according to what you will use in your jQuery statement. Define the query as the function you want to call. If you overload the elements that were installed at boot, you will also need to specify the component, as they will not go through the entire re-rendering life cycle, and there will be no update.

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

To solve this problem, the component simply has an oncomplete attribute for the name of the rich: jQuery component that you want to call. Therefore, in the above example, we need to add this to our component:

  oncomplete = "focusEventBinder ();"

Answer 2

If you understand correctly, you add HTML content after the document is ready using $('ol').after(txtForNewListItem) .

So you need to rebuild the list. I'm doing something like that. Here is the "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 this gives you an idea of ​​what you need to do.

And ... found my thread, where I got an answer. Look here: Failed to bind click event to newly created span elements (jQuery)