1

他の要素へのコンテナとして機能するdivがあり、そのdivに要素を追加するボタンがあります。

それについてのアイデアを得るためにデモを見てください。

したがって、新しい要素を追加する前に、divが定義した要素の最大数（たとえば4）に達しているかどうかを確認します。

追加するたびにこの状態を確認できますが、これは最善の方法ではないと確信しています（コードにコピー/貼り付けが含まれている場合は、最善の解決策ではないことを学びました）また、これは単なるサンプルであり、私の場合は多くのボタンがあります。

このようなリスナーを作る方法はありますか？

$('#container').bind('divFull', function(){
    //My code
});

ボタンを無効にできるように。

4

2 に答える 2

1

まず、DOM 変更イベントをリッスンする必要があります。次に、子の数に基づいてカスタム イベントをトリガーできます。

$('#container').bind('DOMSubtreeModified', function(){
    if($(this).children().length>=4){
        $(this).trigger('divFull');
    }
});

その後、カスタムdivFullイベントにバインドできます

$('#container').bind('divFull', function(){
    alert('container is full');
    $('button').prop('disabled',true);
});

あなたの例に基づいた実用的なデモ

于 2012-06-18T11:29:22.563 に答える
0

DOMSubtreeModifiedイベントがIE<9で機能せず、減価償却されるため、@skafandriメソッドを少し変更します。divFull主な変更点は、コンテナ内の子が4人の場合にイベントを呼び出す関数を作成することです。

var checkFull = function() {
    if ($container.children().length === 4) {
        $container.trigger('divFull');
    }
}

$('#button1').click(function(){
    $container.append('<div class="element">some text</div>');
    checkFull();
});

これがデモです。

于 2012-06-18T11:47:46.003 に答える