Jquery 表单提交后 ajax 滚动不起作用

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

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

你要理解异步。

当您在 $(document).ready 函数中绑定 $(".tooltip").hover 时，$(".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();
  });
})

Jquery 表单提交后 ajax 滚动不起作用

Jquery rollover not working after ajax form submit

jquery

ajax

rollover