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，所以你的原始內容及其所連接的事件都沒有了。試着將視頻彈出到另一個元素中，而不是您單擊的那個元素上