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，所以原始内容及其附加事件都消失了。尝试在另一个元素中弹出该视频而不是您点击的那个

jquery绑定是冲突的

1 个答案: