javascript - 在复杂的脚本上使用 .on

Question

$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});

    $('#add').click(function(){
        $('#app').append('<span title="add" class="masterTooltip">add</span> <br />');
    })

});

居住

如果我单击按钮#add，工具提示将起作用。我一开始就尝试改变：

$(document).on('hover', '.masterTooltip', function(){

和：

}).on('mousemove', function(e) {

但这不起作用。我怎样才能在这个脚本中做到这一点？

Answer 1

你几乎做对了，这是工作代码：

$(document).on('mouseenter mouseleave', '.masterTooltip', function (e) {
    if (e.type === 'mouseenter') {
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('body')
            .fadeIn('slow');
    } else {
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }
}).on('mousemove', '.masterTooltip', function (e) {
    var mousex = e.pageX + 20, //Get X coordinates
        mousey = e.pageY + 10; //Get Y coordinates
    $('.tooltip')
        .css({
        top: mousey,
        left: mousex
    })
});

.hover()只是 themouseenter和mouseleave事件的简写。

此代码为这两个事件附加了一个事件处理程序，然后检查被触发的事件是否为mouseenter. 如果是，则运行悬停代码，否则它必须是一个mouseleave事件，因此运行悬停代码。

这是实际演示：http: //jsfiddle.net/K77hg/3/