2017-02-22 6 views
0

私はwoocommerceを使用しているeshopで作業しています。Ajaxの更新後にクラスを持つターゲットボタン

クラス「single_add_to_cart_button」のカートに追加ボタンと3つのサイズのバリエーション選択リストがあります。

私が使用できないサイズを選択すると、「single_add_to_cart_button」ボタンがクラスに「無効」を追加し、使用可能なサイズに切り替えるとそのクラスが削除されます。

"無効"クラスがある場合、私のボタンに関数onclickを追加しようとしています。

「無効」クラスは、woocommerce自体によってAjax経由で追加されます。バリエーション選択リストは、私は私の選択が変更されたことを確認するためにconsole.logメッセージを追加することができます動作する

$(".variations_form").on("woocommerce_variation_select_change", function() { 

を変更した場合

私がチェックするwoocommerceのjqueryの関数を見つけました。

ただし、.disabledボタンはターゲティングできません。選択リストを変更するたびに、私の ".disabled"ボタンのクリック機能が私の機能を起動します。

私のCSSクラスが変更されたとき、私のjqueryコードはそれを見ないようです。ここ

は私のjqueryのコードです:

$(".variations_form").on("woocommerce_variation_select_change", function() { 

console.log("change"); 

    $(".single-product .single_add_to_cart_button.disabled").click(function(){ 
     $('#modal_commander').modal('show'); 
    }); 

}); 

誰がこれで私を助けることができますか?別のイベント内のイベントをバインドしないでください

おかげ

答えて

0

は、あなたは、この場合には、あなたはすべての時間選択の変更、新たなイベント・ハンドラに結合され、結合複数のイベントと呼ばれるものが発生します。

代わりに、この部分を$(document).ready()または<body>の下部に追加して、イベントコールバックの外側に追加してください。イベントを一度だけバインドします。

$("body").on("click", ".single-product .single_add_to_cart_button.disabled", function() { 
    $('#modal_commander').modal('show'); 
}); 
0

このコードを使用してください。簡潔でシンプル。ボタンに.disabledクラスがあり、それをクリックすると、その関数が実行されます。

$(document).on.("click", ".single-product .single_add_to_cart_button.disabled", function(){ 
    $('#modal_commander').modal('show'); 
}); 
関連する問題