0

私が持っているのは、セレクター ボタンでエントリのリストを動的に配置する DIV を含む Web ページです。この例では、コードを大幅に簡素化しました。

ターゲットDIVは次のようになります

<div id="targetdiv"></div>

サーバーにリストを要求し、次のような文字列を作成します

<div>
 nameofentryfromserver1
 <input type="button" class="dynamicbutton" onclick="someroutine('nameofentryfromserver1')">
</div>
<div>
 nameofentryfromserver2
 <input type="button" class="dynamicbutton" onclick="someroutine('nameofentryfromserver2')">
</div>
<div> ... same thing for next entry and so on

次に、これをドキュメントに挿入します

$( "#targetdiv").html( generatedstring );

これで問題なく動作し、素敵なリストが表示されます。生成されたボタンをクリックすると、正しいルーチンが開始され、パラメーターが正しく渡され、期待どおりの結果が得られます。

ただし、ボタンが押されると、すべての「dynamicbutton」クラス要素を無効にし、処理が完了したら再度有効にしたいと思います。

私が呼び出すルーチン内には、次の行があります

$( ".dynamicbutton").attr( "disabled", "disabled");

しかし、これは動的に生成されたコンテンツには影響しないようです。ページに同じクラスに属する他のボタンがある場合、それらは無効になるため、このメソッドを使用して最初に読み込まれたドキュメントのコンテンツにのみアクセスできるようです.

各ボタンに一意の ID を与え、それぞれを個別に参照しようとしましたが、成功しませんでした。

jQueryが通常の要素選択を介してアクセスできるように、このコンテンツを生成する方法はありますか、それともそれらを操作するために使用する必要がある他の手法はありますか?

4

4 に答える 4

1

以前に選択に使用されたことのないクラスを使用すると、それを使用して動的に生成されたグループを選択できるようです。

したがって、不確定な数の入力を生成しclass="brandspankinnewelements"、そのクラスがページ上の他の要素のセレクターとして以前に使用されていない場合

そのグループを選択できるようになりました$( ".brandspankinnewelements" )

それは人生をずっと簡単にします。

于 2012-11-15T09:19:54.147 に答える
1

動的コンテンツをページに追加した後に、コードを実行する必要があります。前にコードを実行すると、jQuery は動的コンテンツを認識しません。ユーザーがボタンを押したときにコードを実行し、動的コンテンツが追加された後にもう一度実行します。その後、処理が完了したら削除します。

また、使用できます$( ".dynamicbutton").prop( "disabled", true);

于 2012-11-05T16:34:14.937 に答える
1

イベントが#targetにバインドされているときに要素が DOM で使用できない場合など、イベントを委任する必要があります。

また、.prop() 代わりに使用することをお勧めします.attr()

これを試して

$('body').on('click', '#targetdiv', function() {

     $(".dynamicbutton").prop( "disabled", true);

});
于 2012-11-05T16:39:13.653 に答える
1

これはどう？#targetdiv の後にスクリプトを挿入し、動作するかどうか試してください。ここからの .dynamicbutton は、id targetdiv 内のすべてのクラス dynamicbutton のみを無効にします。

<div id="targetdiv"></div>
<script type='text/javascript'>
    $('.dynamicbutton').click( function() { 
        $('#targetdiv .dynamicbutton').attr("disabled", "disabled");
    });
</script>
于 2012-11-15T10:04:03.760 に答える