jquery 绑定有冲突

Question

我将如何重写此代码以使绑定不会冲突？我有一个悬停效果的比例，一旦我单击目标图片（以显示 Youtube 视频），它就会停止响应。

  <script type="text/javascript">
//to scale up on hover
$('#videoandmapwrap').on({
    mouseenter: function () {
        current_h = $(this, 'img')[0].height;
        current_w = $(this, 'img')[0].width;
        $(this).stop(true, false).animate({
            width: (current_w * 2.7),
            height: (current_h * 2.7)
        }, 900);
    },
    mouseleave: function () {
        $(this).stop(true, false).animate({
            width: current_w + 'px',
            height: current_h + 'px'
        }, 400);
    }
}, 'img');

//to reveal from behind placeholder picture
   $('#videoandmapwrap').on("click","img",function(event){
     event.preventDefault();
      video = '<iframe class="piccon" width="200" height="200" src="'+ $(this).attr('data-video') +'"></iframe>';
      $(this).replaceWith(video);  
   });

     </script>

Answer 1

我认为是因为这条线：

$(this).replaceWith(video); 

基本上，您正在用您创建的 iframe 替换 #videoandmapwrap，因此您的原始内容及其附加事件都消失了。尝试在另一个元素中弹出该视频，而不是您点击的那个