Question

在我的代码中，我将悬停事件以显示一个div＆amp; ajax代码替换特定div的内容。发生的事情是，一旦使用ajax请求更新div，悬停事件就会停止工作。这可能是因为在DOM中，它无法找到特定的功能或其他东西，但我无法弄明白。我使用的是jquery 1.11版。这是我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('#a').hover(function(e){
    $("#b").css("display","block");
  });
  $(document).delegate('.buynow','click', function(e){
        $.ajax({
            type: "POST",
            url: "xyz.php",
            context: this,
            data: {type:type},
            success: function(option){
                   $('#a').empty();
                   $('#a').replaceWith(option);
                }
        });
        e.preventDefault;
    }
   });
});
</script>

注意成功的ajax请求中存在#a，<div id='a'>...</div>是要替换的代码。

知道为什么悬停不起作用？我已经尝试了live＆amp; on，但这也没有帮助。

Answer 1

尝试在此上下文中使用event-delegation，因为您要将旧元素替换为具有相同ID的较新元素，顺便说一句，而不是使用.hover()，只需使用mouseenter

  $(document).on('mouseenter','#a',function(e){
    $("#b").css("display","block");
  });

Answer 2

尝试以下代码并使用.one http://api.jquery.com/one/并使用mouseenter事件代替hover： -

$(document).ready(function(){
  $('#a').on('mouseenter', function(e){
    $("#b").css("display","block");
  });

  $(".buynow").one('click', function(e){
        $.ajax({
            type: "POST",
            url: "xyz.php",
            context: this,
            data: {type:type},
            success: function(option){
                   $('#a').empty();
                   $('#a').replaceWith(option);
                }
        });
      }
   });
});

Answer 3

尝试修改您的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('#a').hover(function(e){
    $("#b").css("display","block");
  });
  $(document).delegate('.buynow','click', function(e){
        $.ajax({
            type: "POST",
            url: "xyz.php",
            context: this,
            data: {type:type},
            success: function(option){
                   $('#a').empty();
                   $('#a').replaceWith(option);


 // add hover again after replacing
 $('#a').hover(function(e){
    $("#b").css("display","block");
  }); 

                }
        });
        e.preventDefault;
    }
   });
});
</script>

成功调用ajax后，Jquery悬停效果停止工作

3 个答案: