Question

我正在创建一个搜索数据库中用户的网页。当我在搜索框中输入用户名时，它会在表格中使用Ajax完美地加载结果（此表位于另一个PHP文件中）。但是当我按下箭头键或鼠标悬停（比如Google搜索引擎）时，我需要选择那些行，当我们指向该行时，它会突出显示。我尝试使用onmouseover函数，但没有运气，但在正常的PHP网页onmouseover工作。这是我通常用来选择表格中的行。

我会给你一个非常基本的例子，说明我如何使用它。

<html>
  <head>
    <script type="text/javascript">
      function f1(x){
        document.getElementById(x).style.backgroundColor="#FF0000";<br/>        
      }
      function f2(x){
        document.getElementById(x).style.backgroundColor="#FFFFFF";     
      }
    </script>
  </head
  <body>
    <?php
    echo "<table border='1'>";
    echo "<tr id='tr1' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'> <td>Elephant</td></tr>";
    echo "<tr id='tr2' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'><td>Snake</td></tr>";
    echo "<tr id='tr3' onMouseOver='f1(this.id)' onMouseOut='f2(this.id)'><td>Spider</td></tr>";
    echo "</table>";
    ?>
  </body>
</html>

我的问题是，这在加载Ajax的表中不起作用。请帮帮我......

Answer 1

鼠标悬停事件不起作用，因为您在插入HTML之前注册了该事件。

围绕它的方法是将事件处理程序附加到body标签，然后查看元素的原始源，这基本上就是jquery live方法的作用。这看起来像这样：

$(".hoverme").live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
      $(this).addClass('selected');
  } else {
      $(this).removeClass('selected');
  }
});

我会看到是否有时间编辑键盘控制的答案。

如何突出显示ajax加载的表行？

1 个答案: