1

如您所见，我使用 prepend 添加了一些代码。这些项目（表格单元格）中的每一个都有一个称为“谓词”的类。当用户将鼠标悬停在这些上时，我想用“predicate-over”替换“predicate”。我以为我在下面有我需要的东西，但它似乎不起作用。

<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 中的一些事件可以与实时事件相关联。当您使用 live 连接时，jQuery 将为您处理对 DOM 的更改。如果您不使用 live 并且正在更改 DOM，则需要在 DOM 更改后进行连接。实时事件确实支持 mouseover 和 mouseout - 如果您要使用这些事件而不是悬停，则可以将它们连接到 click 事件之外。

$(".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 回答