how to bind piece of javascript after ajax update

Question

Possible Duplicate:
How to bind a function to Element loaded via Ajax

in my application I want to populate an info panel onmouseover of some cell and highlight the cell so that the user can see which cell. I used the following js and css, which worked well for cells that exist when the page is first loaded

$(document).ready(function(){
    $("table1 td").hover(function(){
    $("table1 td").removeClass('highlight');
    $(this).addClass('highlight');
    });
});

and highlight

.highlight{
    border-style:outset;
    border-width:5px;
    border-color:#0000ff;
}

But in my application the table1 td are generated by a wicket listview and will be updated via Ajax when the user does a search. And after an Ajax update those js code had no effect. How can I make those js code still work after Ajax update? I really appreciate any help!

I think you're looking for [live()](http://api.jquery.com/live/) — Ben, Jul 09 '12 at 13:08
this is what your looking for http://stackoverflow.com/questions/3840149/jquery-live-event-for-added-dom-elements — mcgrailm, Jul 09 '12 at 13:10
Please always *search* before asking. And @Ben - quite right, though `on()` is a more up-to-date means of doing this, since they cleaned up the events API in 1.6. — Mitya, Jul 09 '12 at 13:12

score 1 · Answer 1 · edited Jul 10 '12 at 13:25

1

Sorry, if you want to use bind function you should use this instead. jQuery doesn't support hover.

$(selector).bind('mouseenter', function () {alert('hover'); });
$(selector).bind('mouseleave', function () {alert('hover'); });

edited Jul 10 '12 at 13:25

bluish

26,356
27
122
180

answered Jul 09 '12 at 13:34

Gcaufy

148
1
8

score 0 · Answer 2 · answered Jul 09 '12 at 13:30

Ajax will update your table, so you should not write it in ready function. here are two points:

1). Write it in Ajax success function.

$.ajax(function () {
....,
....,
success: funciton () {
$("table1 td").hover(function(){
$("table1 td").removeClass('highlight');
$(this).addClass('highlight');
});
}
});

2). Use bind function.

$("table1 td").bind('hover', function(){
$("table1 td").removeClass('highlight');
$(this).addClass('highlight');
});

how to bind piece of javascript after ajax update

2 Answers2