表行突出显示问题

需求是当我点击一个文本字段，一个表必须显示在文本字段下方，当我将鼠标移动到行上时，行必须突出显示 - 我在做什么错误码？表行突出显示问题

我的HTML有2个元素：

<input type="text" id="name" value="Name"><div id="line"></div>

的CSS是：

.datahighlight { 
     background-color: #ffdc87 !important; 
}

而jQuery是：

jQuery(document).ready(function($){ 

    $("#name").click(function(){ 
     $("#line").html("<table><tbody><tr class='simplehighlight'><td>Text Row to be highlighted</td></tr></tbody></table>"); 

    }); 

    $('.simplehighlight').hover(function(){ 
      $(this).children().addClass('datahighlight'); 
     },function(){ 
      $(this).children().removeClass('datahighlight'); 
     }); 


});

来源

2011-03-02 naveen

你应该使用jQuery的 '活' 的绑定。试试这个：

$('.simplehighlight').live('mouseover', function() { 
    $(this).children().addClass('datahighlight'); 
}).live('mouseout', function() { 
    $(this).children().removeClass('datahighlight'); 
});

这里是一个的jsfiddle：http://jsfiddle.net/LsDGZ/

来源

2011-03-02 23:37:02 rcravens

具体而言，'hover'不起作用，因为当你尝试应用处理程序的表不存在。 “live”将处理程序绑定到DOM树的根部，并在事件在树上冒泡时处理事件。 – 2011-03-02 23:41:04

作品像一个魅力，我以前尝试过，它并没有工作 - 我现在意识到.live（）引入jquery 1.3起，drupal使用1.2版本 - 我会有兴趣知道纯JavaScript的实现 – naveen 2011-03-03 21:30:53

表行突出显示问题

回答

相关问题