0

可能重复：
jQuery 1.7 - 将 live() 变成 on()

我有这个代码：

<script>
        jQuery('#ultimecomunicazioni')
    .live("mouseenter", function() {
        jQuery(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" href="<?php echo esc_url( home_url( '/' ) ); ?>comunicazioni/">tutte</a>)</span>');
    })
    .live("mouseleave", function() {
        jQuery(this).children('#ultimecomunicazioni_appear').remove();
    });
</script>

我想将两个 .live 更改为 .on 并将两个处理程序合二为一。我试图使用TJ 的这个例子，但我对最后的 'tr' 感到困惑。它应该是这样的，但我不确定：

<script>
jQuery('#ultimecomunicazioni').on({
    'mouseenter' : function () {
        jQuery(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" href="<?php echo esc_url( home_url( '/' ) ); ?>comunicazioni/">tutte</a>)</span>');
     },
    'mouseleave' : function () {
        jQuery(this).children('#ultimecomunicazioni_appear').remove();
    }
});
</script>
4

6 回答 6

1

只需阅读文档.live和委托事件.on的部分，那里解释得很好。

根据其继承者重写 .live() 方法很简单；这些是对所有三种事件附件方法进行等效调用的模板：

$(selector).live(events, data, handler); // jQuery 1.3+

$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+

$(document).on(events, selector, data, handler); // jQuery 1.7+

但是，我不明白为什么您需要在一个具有特定 id 的元素上使用委托功能。您似乎只是遇到了这个问题。

于 2013-02-03T13:42:25.767 回答
1

试试这个：

$(document).on("mouseenter mouseleave", "#ultimecomunicazioni" , function(e) {
    if(e.type === 'mouseenter'){
        $(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" href="comunicazioni/">tutte</a>)</span>');
    } else {
        $('#ultimecomunicazioni_appear').remove();
    }
});

注意：我删除了小php echo代码，因为它不适用于 javascript（服务器与客户端语言）

于 2013-02-03T15:01:13.827 回答
0

你可以试试这个：

<script>
jQuery('#ultimecomunicazioni').parent().on({
    'mouseenter' : function () {
        jQuery(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" href="<?php echo esc_url( home_url( '/' ) ); ?>comunicazioni/">tutte</a>)</span>');
     },
    'mouseleave' : function () {
        jQuery(this).children('#ultimecomunicazioni_appear').remove();
    }
},
'#ultimecomunicazioni'
);
</script>
于 2013-02-03T13:45:39.733 回答
0

您忘记了这样一个事实，即 jQuery 的原始.live()方法很特别，它总是将事件侦听器绑定到document.body. 这也是一个很大的批评点，因为大多数时候没有必要将处理程序放在文档顶部这么远的地方。

.delegate()更像.on()是现在的形式，但他们改变了参数的顺序

method(<element>, <event>, <callback>)

进入

method(<event>, <element>, >callback>)

我不确定这是否会影响您的原始代码，但如果出于某种原因需要事件处理程序处于document.body级别而不是您要求.on()的级别，则可能会造成一些麻烦。

于 2013-02-03T13:47:01.393 回答
0

当我看到您的代码时，这似乎您php对附加内容中的部分有问题：

jQuery('#ultimecomunicazioni').on({
'mouseover': function () {
    jQuery(this).append('<span id="ultimecomunicazioni_appear" style="font-weight:normal;margin-left:5px">(<a style="color:grey" 
href="<?php echo esc_url( home_url( / ) ); ?>comunicazioni/">tutte</a>)</span>');
},    //---------------------------^-^-----------------------here
    'mouseleave': function () {
    jQuery(this).children('#ultimecomunicazioni_appear').remove();
}
});

我刚刚删除了这里的引号，你的代码工作了：http: //jsfiddle.net/CrXZr/

于 2013-02-03T13:58:28.093 回答
0 
$(document.body).on({
    'mouseenter' : function () {
        $('<span id="ultimecomunicazioni_appear"/>').appendTo($(this));
 },
    'mouseleave' : function () {
       $(this).find('#ultimecomunicazioni_appear').remove();
 }, '#ultimecomunicazioni'

});

于 2013-02-03T13:59:13.507 回答