OnMouseOverはp：dataTableの各行内に画像を表示します

Question

私はp：dataTableを持っていて、マウスの上にマウスを置くとdelete画像が表示され、その行を削除できます。私はPrimeFaces.escapeClientIdを使ってjsf Idをidに変換して、jQueryを理解します。ここに私がこれまでに得たものがあります。

<p:dataTable value=#{...} var="item"> 
    <p:column> 
     <div onmouseover="jQuery(PrimeFaces.escapeClientId('deleteButton')).fadeIn()"> 
      <!-- Content of the row --> 
      <p:commandButton id="deleteButton" image="delete" style="border: 0; display: none;" 
           actionListener="#{bean.deleteRow(item)}" /> 
     </div> 
    </p:column> 
<p:dataTable> 

残念ながら、それは動作しません。 Firebugはエラーを返さない。助けてください

Answer 1

すぐに問題は、あなたが "deleteButton"の周りに引用符を入れていないということです - それでjavascriptは文字列リテラルではなく変数名であると考えました。

あなたはjQueryのコンテキストとしてこのを渡すことによって、例えば、「現在の要素内のすべてのdivを」簡単に全体のid事業をスキップし、単に表示することができます：

<p:column> 
<div onmouseover="jQuery('div', this).fadeIn()"> 
    to jest div 
    <div style="color: wheat; background-color: green; display: none"> 
     <p:commandButton id="deleteButton" image="delete" style="border: 0" actionListener="#{bean.deleteRow(item)}" /> 
    </div> 
</div> 
</p:column> 

のonmouseover必要がありますまた、 p：columnで作業してください。

Answer 2

例えばバブリングイベントによって引き起こされることを避けるために、点滅代わりonmouseoverとonmouseoutの使用onmouseenterとonmouseleave

<div onmouseenter="jQuery('span', this).fadeIn()" 
    onmouseleave="jQuery('span', this).fadeOut()"> 
    ... 
</div>