jQuery – prependを使って追加されたコードにホバーする方法

hover jquery prepend

ご覧のとおり、prependを使用してコードを追加しました。 これらの各項目(テーブルセル)には、「predicate」というクラスがあります。 ユーザーがこれらの上にカーソルを置いたとき、私は “predicate”を “predicate-over”に置き換えたいと思います。 以下に必要なものがあると思いましたが、うまくいかないようです。

$(document).ready(function(){$( "#leo-smart"))hover(function(){$( "#007")。prepend( "<img src = 'images / hand.gif' width = '22'高さ= '27' id = '新しく追加' /> ");}、function(){$("#just-added ")。remove();}); $("#007 " .hover(function(){$( "#007")。prepend( "<a href='object.html' border='0'> <img src = 'images / hand.gif' width = '22 ') height = '27' id = '追加した' alt = 'このオブジェクトを見る' /> </a> ");}、function(){$("#just-added ")。$("#007 " .prepend( "<<img src = 'images / hand.gif' width = '22' height = '27' id = '追加した' alt = 'このオブジェクトを表示' />");}); $( "(#leo-smart")。(function(){$( "#more-options"))prepend( "<table> <tr> <td> <div class = 'predicate'>は<</div>です。 </td></tr><tr> <td> <div class = 'predicate'>著名な作品があります</div> </td></tr><tr> <td> <div class = 'predicate' >都市を持っている(住んでいた)</div> </td> </tr> <tr> <td> <div class = 'predicate'>利用者を持っています</div> </td> </tr> <tr> <td> <div class = 'predicate'>の生年月日</ div > </td> <tr> <td> <div class = 'predicate'>生年月日があります</div> </td> </tr> <tr> <td> <div class = 'predicate'>国籍があります< / div> </td> </tr> </table> "); ;)); $( "。predicate")。hover(function(){$(this).addClass( "predicate-over");}、function(){$(this).removeClass( "predicate-over");}) ; ;)); </code> </pre>

<p> </p>

  1  0


ベストアンサー

私は、DOMを変更する(述語クラスを追加する)場合、その時点でホバーを再バインドする必要があるというのが主な考えだと思います。

$( "#leo-smart")。(function(){//テーブルをジャズする$( "。predicate")。 function(){$(this).removeClass( "predicate-over");});});

jQueryのいくつかのイベントは liveイベントと結び付けることができます。 liveを使って接続すると、jQueryはDOMの変更を自動的に処理します。 ライブを使用しておらず、DOMを変更している場合は、DOMが変更された後に接続する必要があります。 ライブイベントはマウスオーバーとマウスアウトをサポートしています
– あなたがホバーの代わりにそれらのイベントを使うことになっていたならば、あなたはクリックイベントの外にそれらを配線することができるでしょう。

$( "。predicate")。live( "mouseover"、function(){$(this).addClass( "predicate-over");});

$( "。predicate")。live( "mouseout"、function(){$(this).removeClass( "predicate-over");});

2


新しく追加された要素への参照を返す prependTo関数を使用することができます。この方法では、要素を見つけるために ‘just-added’というIDは不要です、 例えば:

$( '').prependTo( '#007').hover(function(){/ ** /}、function(){/ ** /});

1


タイトルとURLをコピーしました