Mouseenter not working for dynamic content

Question

I have written a code where i need to trigger a functionality when mouse is over to specific elements.

Its working fine for below code for all static

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

but for all dynamic <td class="editcolumn">XYZ</td> event is not triggering even if i use below code

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

Any idea how to make it work. I'm using jQuery 1.11

score 1 · Accepted Answer · edited May 23 '17 at 12:29

I know I just commented, but I figured I would show you an example:

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');
    });
});

Here is a fiddle

This question's answer gives a much better explanation of delegated events.

Anytime. The reason your function didn't work is because the second parameter passed to the `on` method is meant to catch events of **children** of the original selector. `$('#tablee').on('mouseenter', '.edit-column', function() {});` would also do just fine. — , Sep 17 '14 at 18:09

score 1 · Answer 2 · answered Sep 17 '14 at 17:56

I too faced a similar problem for dynamic elements that are added or removed. In such situations you can create dynamic elements with event-handlers attached to their attributes i.e. in your case you can put the desired operations in a function which gets called by your attribute event handlers:

It should be something like this:

Javascript:

 function whenMouseEnters() {
    // perform some operations
 }

Html:

<td onmouseenter="whenMouseEnters()">

score 0 · Answer 3 · answered Sep 17 '14 at 17:29

0

If table is aviable on DOM load you can write delgated event for the td with class editColumn like this:

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

answered Sep 17 '14 at 17:29

Ehsan Sajjad

61,834
16
105
160

Thanks for your response. I tried but its not working – JavaGeek Sep 17 '14 at 17:32
table is also added dynamically? – Ehsan Sajjad Sep 17 '14 at 17:34
Nope. Only columns are added. – JavaGeek Sep 17 '14 at 17:35
1

`$(document).on("mouseenter", "td.editcolumn", function() {});` maybe? – Sep 17 '14 at 17:38
Yes. Its working with $(document).on("mouseenter", "td.editcolumn", function() {}); – JavaGeek Sep 17 '14 at 17:46
can you post html as well in question and complete code wrapped in ``document.ready`` – Ehsan Sajjad Sep 17 '14 at 17:46
thanks guys for help. Its working if i put $(document) instead of $("table") for mouseenter even of dynamic content. Not sure why but it works – JavaGeek Sep 17 '14 at 17:51
1

its because table is also coming dynamically, table was not rendered on DOM load – Ehsan Sajjad Sep 17 '14 at 17:52

Mouseenter not working for dynamic content

3 Answers3