Question

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????

Answer 1

You can also use $.fn.live()

http://api.jquery.com/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.