錶行突出顯示問題

需求是當我點擊一個文本字段，一個表必須顯示在文本字段下方，當我將鼠標移動到行上時，行必須突出顯示 - 我在做什麼錯誤碼？錶行突出顯示問題

我的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

錶行突出顯示問題

回答

相關問題