0

興味深い質問が 1 つあります。

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() {
    //...
}

説明: 1 つまたは複数のイベントのイベント ハンドラー関数を、選択した要素にアタッチします。

( live関数は非推奨であると指摘した Mattias Buelens 氏によると。)

于 2012-06-03T08:11:36.350 に答える