0

我有一个有趣的问题。

我想使用 jquery 向表中添加行，然后添加行以响应鼠标悬停事件，但代码不起作用。

问题是该行按预期添加，但不响应鼠标悬停事件。

任何建议将不胜感激。

乌尔马斯。

代码如下：

<head>
  <style type="text/css">
  .elem {
    color: purple;
    background-color: #d8da3d 
    }
  </style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>   



</head>

<body>
<table id="table">
   <thead>  
    <tr>
        <th>Numbers</th>
        <th>Letters</th>
        <th>Symbols</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class='elem'>111</td>
        <td class='elem'>aaa</td>
        <td class='elem'>@@@</td>
    </tr>
    <tr>
        <td class='elem'>222</td>
        <td class='elem'>bbb</td>
        <td class='elem'>###</td>
    </tr>
    <tr>
        <td class='elem'>888</td>
        <td class='elem'>iii</td>
        <td class='elem'>???</td>
    </tr>
    </tbody>        
</table>

<input type = "button" id = "add" value = "add row" />


<script type="text/javascript">

$(".elem").mouseover(function() {

alert("over");
});

$("#add").click(function() {

$row_to_add="";

$row_to_add+="<tr>";
    $row_to_add+="<td class='elem'>999</td>";
    $row_to_add+="<td class='elem'>qqq</td>";
    $row_to_add+="<td class='elem'>&&&</td>";
$row_to_add+="</tr>";

 $("#table tr:last").after($row_to_add);

});


</script>

</body>
4

1 回答 1

1

您必须使用on函数将事件侦听器添加到您动态添加的元素。例如：

$(document).on(".elem", "mouseover", function() {
    //...
}

描述：将一个或多个事件的事件处理函数附加到选定元素。

（Per Mattias Buelens 指出live功能已被弃用。）

于 2012-06-03T08:11:36.350 回答