0

私は以下のようなhtmlを持っています:

<ul class="group">
    <label class="category">
        <div class="lightpoint">
                <input type="checkbox" class="parentB" value="{{>name}}" /><label></label>
        </div>
    </label>
    <li>
        <div class="lightpoint">
                <input type="checkbox" class="childB" value="{{>name}}" ><label></label>
        </div>
    </li>
</ul>

上記の HTML スニペットは、Jquery によって動的に追加されました。

JavaScript:

$('.parentB').on("click", function(event){
                var isChecked = $(this).is(':checked');
                $(this).parent().parent().siblings().find('.childB').attr("checked", isChecked);
    });

firefox を使用して、firebug の html の変更を確認しました。「.childB」のチェック状態は、「.parentB」をクリックすると実際に変更されます。しかし、何も起こらないようです。つまり、対応するチェック状態で見えるはずですが、実際にはそうではありません。

それはCSS3が原因ですか？

今、私は答えを持っています。私は自分自身を非常にはっきりさせません。私が使用したjqueryのバージョンは1.9.0で、これはjqueryのバージョンのみです。1.8.3に変更したらうまくいきました。

4

2 に答える 2

0

.parentBそのスクリプトが実行されたときに存在しないため、実際にバインドされるハンドラーはありません。

2 つのオプションがあります。

  1. ハンドラーを親要素にバインドして委任されたイベントを使用し、ターゲット要素を探します。正しい構文で心配しないでください..jQueryはこれをうまくやってくれます..以下を参照してください。

    $(document).on('click', '.parentB', function(event){
   var isChecked = $(this).is(':checked');
   $(this).parent().parent().siblings().find('.childB').attr("checked", isChecked);
});

  2. これらの動的 html を DOM に追加した後、ハンドラーをバインドします。

ほとんどの場合、ポイント 2 が望ましいですが、場合によっては 1 の方が優れています。

于 2013-01-23T16:20:26.523 に答える
0

あなたは無効なhtmlulを持っているliので、直接の子として持つべきです。スクリプトは機能していますが、html を変更するにはスクリプトを変更する必要があります

ライブデモ

<ul class="group">
   <li>  
    <label class="category">
        <div class="lightpoint">
            <input type="checkbox" class="parentB" value="{{>name}}" />
            <label></label>
        </div>
    </label>
    </li>   
    <li>
        <div class="lightpoint">
            <input type="checkbox" class="childB" value="{{>name}}">
            <label></label>
        </div>
    </li>
</ul>

$('.parentB').on("click", function (event) {
    var isChecked = $(this).is(':checked');
    $(this).closest('li').next('li').find('.childB').attr("checked", isChecked);
});
于 2013-01-23T16:22:10.063 に答える