Question

我使用jQuery创建了一个非常简单的翻转，看起来像这样......

jQuery(document).ready(function() {
        jQuery(".tooltip").hover(function(){
            jQuery('.tooltip_message').fadeToggle();
        });
    });

最初加载页面时效果很好。但是当由于某种原因提交ajax表单时，翻转不再有效。

我没有现场示例，因为该网站位于我的本地服务器上，但您认为这可能与我在准备文档时初始化它的方式有关吗？

Answer 1

当元素出现在文档中时，

document.ready 将绑定该函数。它不会绑定动态添加元素的函数。

正如您在问题中提到的那样，这在Ajax之后无效。所以请使用jQuery live / On绑定该函数。 bind vs live

jQuery(document).ready(function() {
    jQuery(".tooltip").live("hover",function(){
        jQuery('.tooltip_message').fadeToggle();
    });
});

Answer 2

这是一个非常常见的问题，不幸的是太常见了，之前已经多次回答。所以这是我的标准答案。

你必须了解异步。

在$(".tooltip").hover函数中绑定$(document).ready时，$(".tooltip")尚不存在。它最初不在您的DOM中。它将在一段时间后创建，当ajax函数结束时，这需要一些时间（甚至几毫秒）。

所以$(".tooltip").hover(...没有做任何事情。

然后正在创建$(".tooltip")。

解决方案：

等待$(".tooltip")创建，然后将点击绑定到它：

$('#content').load('content.php', function(){ // Do your ajax call with load() or ajax()
     // this is the callback function. It will be executed after the load() finishes and content.php is fetched.

  $(".tooltip").hover(function(){
      $('.tooltip_message').fadeToggle();
  });
})

在ajax表单提交后，Jquery rollover无法正常工作

2 个答案: