未修改表格單元格在修改後的DOM中觸發Jquery事件

Question

我有一個簡單的Jquery腳本，它填充了一個空行，裏面有很多行和單元格。

取決於複選框的狀態，我想爲新填充的表格中的所有單元格（不是當頁面加載時，但在表單提交時由JS函數動態創建）切換CSS類。

我可以在表格單元格上設置一個「點擊」事件，它工作正常。

但我嘗試使用on()將函數綁定到hover()事件尚未成功。事件似乎永遠不會被觸發，也不會產生控制檯日誌消息。關於我在做什麼的任何想法都是錯誤的？

$("#resultTable").click(function(e){ // This function works fine. 
     $(e.target).closest('td').toggleClass('stay'); 
    }); 

$("#resultTable td").on("hover", //Same problem for a simpler 'mouseover' 
    function(event){ 
     console.log("MOUSE OVER"); //Never appears 
     $(this).toggleClass('over'); 
    }, 
    function(event){ 
     console.log("MOUSE OUT"); //Never appears 
     $(this).toggleClass('over'); 
    } 
    ); 

Answer 1

如果你是動態插入行到表中，如果其綁定到該綁定發生後進入存在的TDS然後.on將無法​​正常工作。從文檔當對.on的調用進行綁定時，綁定事件的元素必須存在於DOM中。

事件處理程序僅綁定到當前選定的元素;它們必須在代碼調用.on（）時存在於頁面上。

這可能會實現

$j(document).on("hover", "#resultTable td", 
    function(event){ 
     console.log("MOUSE OVER"); //Never appears 
     $(this).toggleClass('over'); 
    }, 
    function(event){ 
     console.log("MOUSE OUT"); //Never appears 
     $(this).toggleClass('over'); 
    } 
    ); 

如果你只添加的行動態，那麼你可以將事件附加到#resultTable，使代表團有點快。

Answer 2

嘗試delegate ..not肯定與支持on

$("#resultTable").delegate("td","mouseover", function(event){ 
     console.log("MOUSE OVER"); //Never appears 
     $(this).addClass('over'); 
    }); 

$("#resultTable").delegate("td","mouseout",function(event){ 
     console.log("MOUSE OUT"); //Never appears 
     $(this).removeClass('over'); 
    });