Question

可能重复：
jQuery 1.7 - Turning live() into 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的this example但我最后对'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>

Answer 1

只需阅读.live的文档和delegated events for .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的一个元素上使用委派功能。您可能只是遇到this issue。

Answer 2

试试这个：

$(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（服务器端与客户端语言）

Answer 3

你可以试试这个：

<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>

Answer 4

你忘记了这样一个事实，即jQuerys原始的.live()方法是特殊的，总是将事件监听器绑定到{ {1}}。这也是一个很大的批评点，因为大多数时候没有必要将处理程序放在文档的顶部。

document.body更像是当前形式的.delegate()，但它们改变了参数的顺序

.on()

到

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

我不确定这是否会影响您的原始代码，但如果由于某种原因需要事件处理程序处于method(<event>, <element>, >callback>)级而不是您调用的document.body级别，则可能会导致一些问题

Answer 5

当我看到您的代码时，您似乎在附加内容中遇到了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/

Answer 6

$(document.body).on({
    'mouseenter' : function () {
        $('<span id="ultimecomunicazioni_appear"/>').appendTo($(this));
 },
    'mouseleave' : function () {
       $(this).find('#ultimecomunicazioni_appear').remove();
 }, '#ultimecomunicazioni'

}）;

jQuery：将.live转换为.on / .off

6 个答案: