Jquery not applying after html is replaced

Question

I have some jquery functions that I call from the $(document).eady() function like the following :

<script type="text/javascript">

$(document).ready(function(){
    $('.table_task_type tr').mouseover(function(){
        $(this).addClass("hover");
    });
    $('.table_task_type tr').mouseleave(function(){
        $(this).removeClass("hover");
    });
    $('input:checkbox').click(function() {
        $(this).parent().parent().toggleClass('checked');
    });
});
</script>

The thing is that I replace part of the html on some user action. I do it like :

$("#my_table").empty();
$("#my_table").html(data);

The jquery events are fired the first time the page is loaded, but as soon as the html of my table is replaced it doesn't work anymore.

Any workaround to that ?

score 1 · Answer 1 · answered Nov 21 '11 at 17:25

1

use jquery live method
example:

$('.table_task_type tr').live('mouseover',function(){
    $(this).addClass("hover");
});

answered Nov 21 '11 at 17:25

unloco

6,928
2
47
58

1

Some useful info from your link: `.live` has been deprecated in favour of `.on` in jQuery 1.7+. They also recommend that you use `.delegate` rather than `.live` in older versions. – Nov 21 '11 at 17:28
1

+1, or the `delegate` method: http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate – Joe Nov 21 '11 at 17:29
I have trouble understanding how delegate works. I tried that but it didn't work : `$('.table_task_type').delegate('tr', 'mouseover', function(){ $(this).addClass("hover");});` – Johanna Nov 21 '11 at 17:39
delegate has been superseded by .on() use .on() like this $(selector).on("event_name",function(){}); your example on .delegate() binds a permanent mouseover event to every sibling under $('.table_task_type') – unloco Nov 21 '11 at 18:24
I tried that `$('.table_task_type tr').on('mouseover', function(){ $(this).parent().parent().toggleClass('checked');});` It still doesn't work. I put it inside the `$(document).ready()` I don't know if it's right, but I also tried outside and it didn't work either. – Johanna Nov 23 '11 at 14:58
this is correct: notice the 'tr' selector `$('.table_task_type').on('mouseover','tr',function(){ $(this).parent().parent().toggleClass('checked');});` test here: http://jsbin.com/izejav – unloco Nov 23 '11 at 16:45
I really don't understand what I am doing wrong. I tested the exact same function in jsbin and it works. It just doesn't want to work on mine :( – Johanna Nov 23 '11 at 18:01

score 0 · Answer 2 · answered Aug 28 '13 at 00:48

You should use the .on() method as the previous posters have suggested. What you want to do is put the binding on a parent element of the container that is being refreshed.

<div id="content">
    <div id="my_table">
        <table>
            <tr class="table_task_type">
                <td>foo</td>
                <td>bar</td>
                <td>baz</td>
            </tr>
        </table>
    </div>
</div>


$(function() {
    $('#content').on('hover', '.table_task_type', 
        function() {
            $(this).toggleClass('.rollover');
        }, 
        function() {
            $(this).toggleClass('.rollover');
        });
});

The listener is bound to the parent container of the one you are re-populating. Since the parent container (#content) is not re-populated, the binding won't break. It's also faster because the click event only has to bubble up one node in the DOM as opposed to bubbling all the way up to document.

Jquery not applying after html is replaced

2 Answers2