0

このトピックに関する多くの回答を見て試しましたが、うまくいく解決策が見つからないようです。明らかな何かが欠けている可能性がありますが、その場合はお詫び申し上げますが、ここに私の問題があります:

DIV 要素内にネストされたチェックボックスがあります。この DIV 要素には jQuery クリック イベントが関連付けられており、チェックボックスがチェックされているかどうかをチェックし、チェック/チェックを外します。チェックされているかどうかに応じて、変数を PHP スクリプトに送信し、セッション変数に追加します。

クリックされたDIVの場合、これはすべて正常に機能しますが、チェックボックスがクリックされると、毎回チェックボックスのチェックを外すイベントが発生するため、バブルが発生すると思います。チェックボックスのクリックイベントを使用stopPropogation();してpreventDefault();添付しようとしましたが、役に立ちませんでした。

これをより明確にするためのサンプルコードを次に示します。

チェックボックス HTML コード:

<div class='bundle_offer' id='bundle_offer_0'>
    <input type="checkbox" />
</div>

クリック機能:

// Click function on bundle offer div to add booster
$(".bundle_offer").click(function (event) {

    // IF its not the checkbox clicked, send over the div id
    if (event.target.type !== 'checkbox') {

        var bundle_offer_div_id = "#"+this.id;
        bundle_offer_click(bundle_offer_div_id);
    }
    // ELSE find div id and send it
    else{
        var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
        bundle_offer_div_id = "#"+bundle_offer_div_id;
        bundle_offer_click(bundle_offer_div_id);
    }
}); // end bundle offer click function

このbundle_offer_click関数は、クリックされた DIV の ID を取得し、チェックボックスを見つけてチェック/チェックを外し、適切な変数を AJAX 経由で PHP スクリプトに送信するだけです。

編集：

ロジックを少し移動することで問題を解決できました。これを次のように変更しました。

// Click function on bundle offer div to add booster
$(".bundle_offer").mouseup(function (event) {

    // Get whether checked or not
    var isChecked = $(this).find('input').is(':checked');

    // IF its not the checkbox clicked
    // check/uncheck
    // send over the div id
    if (event.target.type !== 'checkbox') {
        if(isChecked == false){
            // Check
            $(this).find('input').attr('checked',true);
        }
        else{
            // Uncheck
            $(this).find('input').attr('checked',false);
        }
        var bundle_offer_div_id = "#"+this.id;
        bundle_offer_click(bundle_offer_div_id, isChecked);
    }

    // ELSE find div id and send it
    else{   
        var bundle_offer_div_id = $(this).closest(".bundle_offer").attr("id");
        bundle_offer_div_id = "#"+bundle_offer_div_id;
        bundle_offer_click(bundle_offer_div_id, isChecked);
    }
}); // end bundle offer click function

主な違いは、mouseup代わりに関数を使用し、マウスアップ関数ではなくその関数内でチェックボックスをオン/オフするためのロジックを実行することbundle_offer_clickです。

4

1 に答える 1

0

チェックボックスブラウザをクリックした場合は、チェックボックスを自動的にオン/オフにします。JavaScriptを使用してそれを行う必要はありません。

bundle_offer_clickチェックボックスをオン/オフにしていると思います。bundle_offer_clickフラグ値の2番目のパラメーターはクリックされた要素に依存する必要があるため、フラグを渡す 必要があります。bundle_offer_clickフラグに基づいて内部でチェックボックスにアクションを実行します。

コード：

function bundle_offer_click(id, isCheckBoxClicked){
    if(isCheckBoxClicked){

       //do nothing on check box
     }
}
于 2012-09-27T10:41:16.253 に答える