从.live更改为.on

我知道.live已折旧，最近我正在更新一个页面并意识到我正在使用.live我想切换到.on但不明白要更改什么。这是我目前的代码：从.live更改为.on

//Script for Choosing which form to display 
$("#email-button, #text-button").live('click', 
function(){ 

    //figure out what button was clicked. 
    if(this.id === "email-button"){ 
     var btnA = $(this); 
     var btnB = $("#text-button"); 
     var divA = $('#email-form'); 
     var divB = $('#text-form'); 
    } 
    else{ 
     btnA = $(this); 
     btnB = $("#email-button"); 
     divA = $('#text-form'); 
     divB = $('#email-form'); 
    } 

    //make sure it is not already active, no use to show/hide when it is already set 
    if(btnA.hasClass('dark_button_span')){ 
     return; 
    } 

    //see if div is visible, if so hide, than show first div 
    if(divB.is(":visible")){   
     divB.fadeOut("slow", function(){ 
      divA.fadeIn("slow"); 
     }); 
    } 
    else{//if already hidden, just show the first div 
     divA.fadeIn("slow");    
    } 

    //Add and remove classes to the buttons to switch state 
    btnA.addClass('dark_button_span').removeClass('light_button_span'); 
    btnB.removeClass('dark_button_span').addClass('light_button_span'); 
    }  
);

我曾帮助编写上述脚本，不知道要更改什么。简单地改变.live to .on不起作用。

任何帮助将不胜感激！

谢谢！

来源

2012-10-24 L84

http://api.jquery.com/live/ ---在文档中有如何做到这一点的示例 – zerkms

在使用'.live（）'，'.delegate（）'，'.on（）'或类似的东西，花一个小时左右的时间阅读*“事件代表团”*。它基本上是如何工作的*（有时用'.on（）'）*，这是一个非常简单的概念，也是每个人都应该理解的事情之一。 –

@ user1689607 - 感谢您的建议，我会阅读。 – L84

$(document).on('click', '#email-button, #text-button', function() { 
    // Your code 
});

应该这样做。见http://api.jquery.com/live/和http://api.jquery.com/on/。

但是，由于您使用的是ID，您可能甚至不需要.live()或委托.on()。所以我会这样写：

function doButtons(btnA, btnB, divA, divB) { 
    btnA = $(btnA); btnB = $(btnB); divA = $(divA); divB = $(divB); 

    // Make sure it is not already active, no use to show/hide when it is already set 
    if (btnA.hasClass('dark_button_span')) 
     return; 

    // See if div is visible, if so hide, then show first div. 
    if (divB.is(":visible")) {   
     divB.fadeOut("slow", function (){ 
      divA.fadeIn("slow"); 
     }); 
    } 
    else // If already hidden, just show the first div. 
     divA.fadeIn("slow"); 

    // Add and remove classes to the buttons to switch state. 
    btnA.addClass('dark_button_span').removeClass('light_button_span'); 
    btnB.removeClass('dark_button_span').addClass('light_button_span'); 
} 

$('#email-button').click(function() { 
    doButtons(this, '#text-button', '#email-form', '#text-form'); 
}); 
$('#text-button').click(function() { 
    doButtons(this, '#email-button', '#text-form', '#email-form'); 
});

来源

2012-10-24 03:48:14

你重写的代码效果很好，我想我会接受建议，不要使用'.live（）'或'.on（）'谢谢！ – L84

@Lynda很高兴它的工作！（老实说，我实际上没有测试重写。：P） –

... Downvote？为什么？ –

有关语法

$("containerElement").on("click", "targetElement(s)", function(){ });

所以你的情况可能是

$("body").on("click", "#email-button, #text-button", function(){ });

但比body更具体的是一个好主意。

来源

2012-10-24 03:47:21 Jan

jQuery的.on不使用事件委托，除非你提供一个选择器。在上面的代码中，.live在document处侦听事件，但这太冒泡了。如果我们用.on来实现它，虽然我们会做到以下几点：

var handler = function(e) { 
    console.log("Clicked"); 
}; 

$(document).on("click", "#email-button, #text-button", handler);

再次，虽然，它是不是真的那么明智的侦听的document事件;理想情况下，你会选择一个在你的选择器上方的元素。因此，如果#email-button和#text-button有共同的父项，则应使用该项代替document。

来源

2012-10-24 03:50:30 Sampson

从.live更改为.on

回答

相关问题