0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

動的にボタン制御

Posted at

動的に生成されたも問題なく対象に含めることができます。jQueryの.find()メソッドは、現在のDOMツリーの中で指定したセレクタに一致する要素を動的に検索するためです。

以下のポイントを確認してください。

理由

  1. 動的に生成された要素も検索対象
    $('#targetDiv').find('input[type="button"]')は、#targetDivの現在の状態(動的に生成された要素も含む)を検索するため、動的要素でも問題ありません。

  2. 再検索の仕組み
    .find()は呼び出されるたびにDOMツリー全体を調査するため、動的に生成された要素がすでに#targetDivの子孫であれば正常に処理されます。

  3. 非活性化の適用
    .prop('disabled', true)も対象の要素が現在のDOMツリー内にあれば適切に動作します。


確認用の動的生成を含むHTML例

以下の例では、動的に生成されたも含めて非活性化します。

既存のボタン1
すべてのボタンを非活性化 ボタンを動的に追加

実行の流れ

  1. ページロード時は#targetDivに1つのしかありません。

  2. 「ボタンを動的に追加」をクリックすると、が追加されます。

  3. 「すべてのボタンを非活性化」をクリックすると、既存と動的に生成されたボタンの両方が非活性化されます。


注意事項

もし、動的生成されたが#targetDiv外に配置される場合や、動的生成時に一時的にDOM外で処理される場合は、以下のようにイベント委譲を利用して適切に制御します。

$(document).on('click', '#disableButtons', function() {
$('#targetDiv').find('button, input[type="button"]').prop('disabled', true);
});

これにより、動的生成に伴うタイミングの問題も解消できます。

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?