将鼠标悬停在由 ajax 加载或获取函数填充的元素上时出现问题

Question

我在 FF 和 Chrome 中遇到悬停功能问题。我有一个通过 ajax 动态填充的表。然后我尝试操作通过 ajax 发送的元素，但它在 FF 和 Chrome 中不起作用。以下是该页面的代码：

/** 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 `

tbody 元素已正确填充，但动态生成的 .editable 元素上的悬停或任何其他操作不起作用。

请问有什么帮助吗？？？？

Answer 1

您还可以使用 $.fn.live()

http://api.jquery.com/live/

描述：将处理程序附加到当前和将来与当前选择器匹配的所有元素的事件。

更新
还应该注意的是，另一个合适的解决方案是：

$.fn.delegate()

http://api.jquery.com/delegate/

描述：根据一组特定的根元素，将处理程序附加到现在或将来与选择器匹配的所有元素的一个或多个事件。

Answer 2

我相信你的悬停是在ajax加载完成之前设置的。尝试将 .hover() 函数放入 $(document).ready(function(){});

Answer 3

在任何 ajax 调用之后，您必须重新调用元素上的悬停函数

    $('#resourcelist tbody').load(inc_processplugin.asp?cmd=select&tc=listresource,function () {
         $('#divShowAddResource').hide();
         $('.editable').hover(function () {
             $(this).toggleClass('over-inline');
         })
    })

  });

Answer 4

尝试在 $(document).ready() 事件处理程序中运行 jQuery 代码。当您附加悬停事件处理程序时，这些 td 元素可能不存在，因此它不起作用。

在确定元素已创建后，您还可以在 ajax 成功处理程序中运行悬停代码