1

ご覧のとおり、prepend を使用していくつかのコードを追加しました。これらの各項目 (表のセル) には、「述語」と呼ばれるクラスがあります。ユーザーがこれらにカーソルを合わせると、「述語」を「述語オーバー」に置き換えたいと思います。以下に必要なものがあると思いましたが、うまくいかないようです。

<script>
$(document).ready(function() {
        $("#leo-smart").hover(
        function() { $("#007").prepend("<img src='images/hand.gif' width='22' height='27' id='just-added' />"); },
        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='just-added' alt='View this object' />                </a>"); },
        function() { $("#just-added").$("#007").prepend("<img src='images/hand.gif' width='22' height='27' id='just-added' alt='View this object' />"); }
        );
        $("#leo-smart").click(
        function() { $("#more-options").prepend("<table><tr><td><div class='predicate'>is a</div></td></tr><tr><td><div class='predicate'>has famous work</div>         </td></tr><tr><td><div class='predicate'>has city (lived in)</div></td></tr><tr><td><div class='predicate'>has patron</div></td></tr><tr><td><div class='predicate'>has birthdate</div></td><tr><td><div class='predicate'>has birthcity</div></td></tr><tr><td><div class='predicate'>has nationality</div></td></tr></table>"); } 
        );
        $(".predicate").hover(
        function() { $(this).addClass("predicate-over"); },
        function() { $(this).removeClass("predicate-over"); }
        );
});

4

2 に答える 2

2

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

$("#leo-smart").click(
  function() {  
    // do your table jazz
    $(".predicate").hover(
      function() { $(this).addClass("predicate-over"); },
      function() { $(this).removeClass("predicate-over"); }
    );
  } 
);

jQuery の一部のイベントは、ライブイベントと関連付けることができます。ライブを使用して接続すると、jQuery が DOM への変更を処理します。ライブを使用しておらず、DOM を変更している場合は、DOM が変更された後に配線する必要があります。ライブ イベントは mouseover と mouseout をサポートしています。ホバーの代わりにこれらのイベントを使用する場合は、クリック イベントの外にそれらを接続できます。

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

$(".predicate").live("mouseout", function() {
  $(this).removeClass("predicate-over"); 
});
于 2009-08-18T04:10:54.623 に答える
1

新しく追加された要素への参照を返すprependTo関数を使用できます。このように、要素を見つけるために「追加されたばかり」のIDは必要ありません。次に例を示します。

$('<img src="images/hand.gif" width="22" height="27" />')
  .prependTo('#007')
  .hover(function () {/**/}, function () {/**/});
于 2009-08-18T03:59:35.487 に答える