2

我在使用 Jquery 时遇到了一些问题。基本上我打印了一个 .html() 响应，我必须在鼠标悬停时突出显示表格的行，但它不起作用。

HTML 表格

<table id='simplehighlight'>
<tr>
 <td>header 1</td>
 <td>header 2</td>
</tr>
<tr>
 <td>bla bla bla</td>
 <td>highlight this row</td>
</tr>
<tr>
 <td>bla bla bla</td>
 <td>or highlight this row</td>
</tr>
</table>

上表是用 PHP 回显打印的。使用 ajax 调用 PHP 脚本，并使用 .html() 函数将响应打印在 div 中。例子：

function(data, textStatus) {
          if(textStatus == "success") {
             $('#resultBox').html(data);
          }
        }, 'text/html');
}

数据是HTML 表。最后但并非最不重要的一点是，我有用于激活它不起作用的突出显示的 jquery 代码。

    $("simplehighlight tr").not(':first').hover(
       function () {
                    $(this).css("background","yellow");
       },
       function () {
                    $(this).css("background","");
       }
    );

我没有突出显示该行，而是设置了一个简单的警报来检查它是否有效，但显然它没有。为什么？我的代码有什么问题？我怎样才能完成我的任务，也就是突出显示这些行？

谢谢大家，阿尔贝托-

4

4 回答 4

2

通过 jQuery 附加事件处理程序on应该可以工作：

$('body').on('mouseenter mouseleave', '#simplehighlight tr:not(:first-child)', function() {
    $( this ).toggleClass( 'highlighted' );
} );

看到这个 jsFiddle。

使用on这种方式的好处是，您提到的表可以随时添加（例如通过 AJAX 调用）。当直接调用onjQuery 匹配时（如在 中jQuery("#simplehighlight tr").not(':first').on(...)），jQuery 仅将处理程序绑定到当前存在的DOM 元素。

注意：我用 , 替换了hover事件mouseenter mouseleave，因为hover从 jQuery 1.9 开始删除：

在 jQuery 1.8 中弃用，在 1.9 中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。

来源：http ://api.jquery.com/on/

于 2013-05-30T09:54:24.517 回答
0

您必须记住，诸如您尝试执行的命令之类的命令只会针对您的 DOM中已经存在的元素执行。所以基本上你必须像这样组合你的代码的两个部分：

    function(data, textStatus) {
      if(textStatus == "success") {
        $('#resultBox').html(data);

        $("simplehighlight tr").not(':first').hover(
            // do highlight stuffs here
            alert("IT WORKS??");
        });
      }
    }, 'text/html');
   }
于 2013-05-30T09:35:59.030 回答
0

尝试

jQuery("#simplehighlight tr").not(':first').mouseover(function(){
    // do highlight stuffs here
    alert("IT WORKS??");
});

这里有一个 js fiddle here

于 2013-05-30T09:45:37.893 回答
0

hover()您应该设置一个事件处理程序来执行此操作，而不是手动触发该函数。事件也将从插入的元素中捕获；因此，您甚至可以在 AJAX 调用之前设置事件侦听器。

jQuery( 'simplehighlight tr' ).not(':first').on( 'hover', function() {
    var currentTR = jQuery( this );
    currentTR.addClass( 'highlight' );
} );
于 2013-05-30T09:39:18.293 回答