jquery bindings are conflicting

Question

How would I rewrite this code so that the bindings don't conflict? I have a scale on hover effect that stops responding once I click on the target picture (to reveal a Youtube video).

  <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

i think its because of this line:

$(this).replaceWith(video); 

basically you are replacing the #videoandmapwrap with the iframe you created, so your original content and its attached events are gone. try popping that video up in another element instead of the one you clicked on