2

減価償却が行われていることはわかって.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');
  }    
);

上記のスクリプトの作成を手伝ってもらいましたが、何を変更すればよいかわかりません。.liveを.onに変更するだけでは機能しません。

どんな助けでも大歓迎です！

ありがとう！

4

3 に答える 3

5

onの構文は次のとおりです。

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

だからあなたの場合それはかもしれません

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

しかし、より具体的にbodyするのは良い考えです。

于 2012-10-24T03:47:21.810 に答える
1 
$(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-24T03:48:14.150 に答える
1

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-24T03:50:30.813 に答える