CODEWITHSUNDEEP
jqueryajaxloadgethover
fisdelom
fisdelom

Reputation: 39

Issue with hover on elements populated by ajax load or get function

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

Answers (4)

bstakes
bstakes

Reputation: 1898

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.

Upvotes: 2

Boris Lutskovsky
Boris Lutskovsky

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

Jason Spick
Jason Spick

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

Johnny Craig
Johnny Craig

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

Related Questions