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를 교체, 그래서 당신의 원본 콘텐츠와 연결된 이벤트가 사라 졌어요. 해당 동영상을 클릭 한 파일 대신 다른 요소로 띄우십시오.