Javascript 从。现场到。现场

我知道

.live

被贬值了，最近我更新了一个页面，意识到我正在使用

。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');
  }    
);

我在写上面的脚本时得到了帮助，不知道要修改什么。简单地改变。生活到。继续不起作用

任何帮助都将不胜感激

谢谢

on的语法是

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

所以在你的情况下可能是

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

但是比身体更具体是个好主意

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

我们应该做到这一点。见和

但是，由于您使用的是IDs，您甚至可能不需要

.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');
});

---

jQuery的

.on

不使用事件委派，除非您为其提供选择器。在上面的代码中，

.live

侦听

文档中的事件，但这太冒泡了。如果我们在

上使用

实现它，我们将执行以下操作：

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

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

不过，再次强调，倾听
文档上的事件并不是那么明智；理想情况下，您可以选择选择器上方的元素。因此，如果
#email按钮
和
#text按钮
有一个共同的父项，你应该用它来代替
文档
——在使用
.live（）
，
.delegate（）
，
.on（）
或任何类似的东西之前，文档中有一些例子说明了如何做到这一点，请花一个小时左右的时间仔细阅读“事件委派”。这基本上就是它们的工作方式（有时使用
.on（）
），这是一个非常简单的概念，也是每个人都应该理解的事情之一。@user1689607-谢谢你的建议，我会仔细阅读。你知道你为什么要使用
live
吗？你重新编写的代码效果很好，我想我会接受建议，而不是使用
.live（）
或
.on（）
谢谢！@Lynda很高兴它成功了！（老实说，我并没有真正测试重写过程。：P）