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

Question

在我的代码中,我将悬停事件以显示一个div和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>

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

知道为什么悬停不起作用吗？我已经尝试过live&on,但这也没有帮助.

Answer 1

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

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