jquery 事件委托

Question

我正在尝试使用事件委托重写一段 sn-p 代码（希望它不会与另一个 js 片段发生冲突）。但我已经破坏了代码

原创

//to scale up on hover
var current_h = null;
var current_w = null;

$('.piccon').hover(
    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);
    },
    function(){
        $(this).stop(true, false).animate({width: current_w + 'px', height: current_h + 'px'}, 400);
    }
);

//使用事件委托

//to scale up on hover
var current_h = null;
var current_w = null;

$('#videoandmapwrap').on("hover","img", function(event){
        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);
    },
    function(){
        $(this).stop(true, false).animate({width: current_w + 'px', height: current_h + 'px'}, 400);
    }
  event.preventDefault();
);

从占位符后面显示

//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);  
    });

Answer 1

.hover() 不是一个事件，它只是一个实用方法，它添加了一个 mouseenter 和 mouseleave 处理程序，所以当你想使用事件委托时，你需要为这两个事件注册处理程序而不是使用 @ 987654324@

$(document).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);
    }
}, '.piccon');

---

或者

$('#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');

---

另一种写法是

$('#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);
}, 'img').on('mouseleave', function () {
    $(this).stop(true, false).animate({
        width: current_w + 'px',
        height: current_h + 'px'
    }, 400);
}, 'img');