Mouseenter不适用于动态内容

时间:2014-09-17 17:28:53

标签: javascript jquery

我编写了一个代码,当鼠标转到特定元素时,我需要触发一个功能。

它适用于所有静态

的以下代码
$("table td").on("mouseenter",function(){
    console.log("mouse entered")
});

但是即使我使用下面的代码

,所有动态<td class="editcolumn">XYZ</td>事件也不会触发
$("table td").on("mouseenter",".editcolumn",function(){
    console.log("mouse entered")
});

知道如何让它发挥作用。我正在使用jQuery 1.11

3 个答案:

答案 0 :(得分:1)

我知道我刚评论过,但我想我会给你一个例子:

HTML:

<table id="tablee" cellspacing="0">
    <thead>
        <tr class="tablehead">
            <th>This</th>
            <th>is</th>
            <th>a</th>
            <th>table</th>
            <th>header</th>
            <th>and</th>
            <th>stuff</th>
            <th>though</th>
        </tr>
    </thead>
    <tr class="append">
        <td class="edit-column">asdf</td>
        <td class="edit-column">qwer</td>
        <td class="edit-column">zxcv</td>
        <td class="edit-column">rtyu</td>
        <td class="edit-column">tyui</td>
        <td class="edit-column">dfgh</td>
        <td class="edit-column">dfgh</td>
        <td class="edit-column">wert</td>
    </tr>
    <!-- ... -->
</table>
<br/>
<br/>
<input type="button" class="add-column" value="Add Column" />


的Javascript:

$(function() {
    $('.add-column').click(function() {
        $('.append').append("<td class='edit-column'>iueo</td>");
        $('.tablehead').append("<th>Mo columns</th>");
    });
                                  /*  vvv - this   */
    $("#tablee").on('mouseenter', '.edit-column', function() {
    /* ^^^ should be children or a child of this */
        $(this).css('background-color', 'yellow');
    });
});



这是 fiddle

This question's answer 可以更好地解释委派事件。

答案 1 :(得分:1)

我也面临着添加或删除动态元素的类似问题。在这种情况下,您可以使用附加到属性的事件处理程序创建动态元素,即在您的情况下,您可以将所需的操作放在由属性事件处理程序调用的函数中:

它应该是这样的:

<强>使用Javascript:

 function whenMouseEnters() {
    // perform some operations
 }

<强> HTML

<td onmouseenter="whenMouseEnters()">

答案 2 :(得分:0)

如果表格对DOM加载有效,您可以使用类 editColumn td 编写委托事件,如下所示:

$("table").on("mouseenter",".editcolumn",function(){
   console.log("mouse entered")
 });