Is this a bug?jQuery can not work in h:form or a4j:form!


For example,
below code work.

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 template="/layout/template4HOME.xhtml">

 <ui:define name="body">

 <table id="controllerTable" width="100%">
 <tr valign="top">
 <td width="60px" align="center">
 <h:graphicImage id="imageController4Full" height="53px" width="53px" value="/img/angle/view1_full.gif" />
 <br/><h:outputText value="Pair"/>
 </td>
 </tr>
 </table>


 <h:outputText id="testjQuery" value="aaaaaaaaaaaaaaaa"/>


 <style type="text/css">
 .class4Hide{
 display:none
 }
 .class4Wrap{
 width:500px;
 height: 400px;
 float: left;
 }
 </style>

 <rich:jQuery selector="table#controllerTable tr td img:eq(0)" query="mouseover(function(){jQuery('#testjQuery').addClass('class4Hide')})"/>
 <rich:jQuery selector="table#controllerTable tr td img:eq(0)" query="mouseout(function(){jQuery('#testjQuery').removeClass('class4Hide')})"/>


 </ui:define>
</ui:composition>

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:s="http://jboss.com/products/seam/taglib"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich"
 template="/layout/template4HOME.xhtml">

 <ui:define name="body">
 <a4j:form>
 <table id="controllerTable" width="100%">
 <tr valign="top">
 <td width="60px" align="center">
 <h:graphicImage id="imageController4Full" height="53px" width="53px" value="/img/angle/view1_full.gif" />
 <br/><h:outputText value="Pair"/>
 </td>
 </tr>
 </table>


 <h:outputText id="testjQuery" value="aaaaaaaaaaaaaaaa"/>


 <style type="text/css">
 .class4Hide{
 display:none
 }
 .class4Wrap{
 width:500px;
 height: 400px;
 float: left;
 }
 </style>

 <rich:jQuery selector="table#controllerTable tr td img:eq(0)" query="mouseover(function(){jQuery('#testjQuery').addClass('class4Hide')})"/>
 <rich:jQuery selector="table#controllerTable tr td img:eq(0)" query="mouseout(function(){jQuery('#testjQuery').removeClass('class4Hide')})"/>
 </a4j:form>

 </ui:define>
</ui:composition>