Reputation: 39
I'm having an issue with hover function in FF and Chrome. I've a table that's populated dynamically through ajax. I'm then trying to manipulate the elements sends through ajax, but it's not working in FF and Chrome. Here is the code of the page:
/** My page**/
$('#resourcelist tbody').load(inc_processplugin.asp?cmd=select&tc=listresource,function () {
$('#divShowAddResource').hide();
});
$('.editable')
.hover(function () {
//alert('Am hovering');
//change background of an editable element if mouse hover
$(this).toggleClass('over-inline');
})
/** The elements editable is the one that populate the tbody above. It's generated dynamically from inc_processplugin.asp Here is part of the incprocessplugin.asp that populate the tbody element**/
query = "SELECT * from t_cmsix_tc_resource WHERE isnull(resource_inactive,0)=0"
objRs.Open query, objConn
Do while Not objRs.EOF
Response.Write("<tr>" & vbCrlf)
Response.Write("<td><span class=""editable"" id=""" & objRs("resource_id") & """>" & objRs("resource_name") & "</span></td>" & vbCrlf)
Response.Write("</tr>" & vbCrlf)
objRs.MoveNext
Loop `
The tbody element is correctly populated but the hover or any other actions on the .editable elements that are generated dynamically is not working.
Any help please????
Upvotes: 0
Views: 1207
Reputation: 1898
You can also use $.fn.live()
Description: Attach a handler to the event for all elements which match the current selector, now and in the future.
Update It should also be noted that another appropriate solution is:
$.fn.delegate()
http://api.jquery.com/delegate/
Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
Upvotes: 2
Reputation: 561
try running your jQuery code in the $(document).ready() event handler. Those td elements may not exist when you're attaching the hover event handler, and therefore it's not working.
you can also run the hover code in the ajax success handler, after you're sure that the elements have been created
Upvotes: 0
Reputation: 6098
I believe that your hover is set before ajax is done loading. Try putting the .hover() function in $(document).ready(function(){});
Upvotes: 1
Reputation: 5000
After any ajax call you have to re-call the hover function on the elements
$('#resourcelist tbody').load(inc_processplugin.asp?cmd=select&tc=listresource,function () {
$('#divShowAddResource').hide();
$('.editable').hover(function () {
$(this).toggleClass('over-inline');
})
})
});
Upvotes: 0