質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.62%

最初から設定しているイベントを動的に追加した要素にも適用する

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 126

score 223

Semantic-UIというデザイン系のライブラリを利用しながら下記のコードを作成しております。.btnをクリックすると.dropdown要素が動的に追加されていきます。
しかしながら追加された要素については、dropdownが効いてくれません。動的に追加された要素のイベントはそのままでは動作してくれないのは知っていたのですが、ここで  
$('.ui.dropdown').dropdown()
$(document).ready(function(){$('.ui.dropdown').dropdown()}としても
実装することができません。どのようにしたら追加でき要素にも$('.ui.dropdown').dropdown()を当てることができるのでしょうか?

因みにですが、$('.btn').on('click',function(){})のたびにその中に$('.ui.dropdown').dropdown()を入れると一応動きはするのですが、処理が尋常ではななく遅くなることが判明しております。そもそもこのやり方自体が適切ではないと感じています。

宜しくお願い申し上げます。

動くサンプル

  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <div class="dropdown_wrapper">
      <div class="ui selection dropdown">
        <input type="hidden" name="gender">
        <i class="dropdown icon"></i>
        <div class="default text">Gender</div>
        <div class="menu">
          <div class="item" data-value="1">Male</div>
          <div class="item" data-value="0">Female</div>
        </div>
      </div>
    </div>
    <div>
      <button class="btn">push</button>
    </div>
    <script type="text/javascript">
    $('.ui.dropdown')
      .dropdown()
    ;
    $('.btn').on('click',function(){
     var elem ='\
      <div class="ui selection dropdown">\
      <input type="hidden" name="gender">\
      <i class="dropdown icon"></i>\
      <div class="default text">Gender</div>\
      <div class="menu">\
        <div class="item" data-value="1">Male</div>\
        <div class="item" data-value="0">Female</div>\
      </div>\
    </div>'
     $('.dropdown_wrapper').append(elem);
    })
  </script>
  </body>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

新たに作った要素だけにdropdownメソッドを使えばいいと思うので、

$('.dropdown_wrapper').append( $(elem).dropdown() );

などとするのはどうでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/09/15 21:04 編集

    ありがとうございます。やっと直感的に理解することができました。
    var elem_after =$(prepend_item).prependTo('tbody');
    $('.ui.dropdown', elem_atfer).dropdown();
    $('.ui.calendar', elem_after).calendar({
    type: 'date',
    formatter: {
    date: function (date) {
    var day = ('0' + date.getDate()).slice(-2);
    var month = ('0' + (date.getMonth() + 1)).slice(-2);
    var year = date.getFullYear();
    return year + '-' + month + '-' + day;
    }
    }
    })

    キャンセル

  • 2021/09/15 21:07

    こんなやり方で実装することができました。
    1.ただ、当初予想していた通り、処理がばかみたい重いことがわかりました。これはsemantic uiのcalenderの処理に依存しているので、どうしようもなさそうです。
    2.また、$(prepend_item).filter('.ui.dropdown')で直感的に1.の意味が直感的に理解できたのですが、仰る通り等価ではないようで、$(prepend_item).filter('.ui.dropdown')では動作しないようです。それを受けて、上記のコードのようにprependしたJqueryラッパー化されたエレメントをelem_afterとしてから、それぞれメソッドを追加してみました。

    キャンセル

  • 2021/09/16 09:30

    すみません、間違えてました。
    filterじゃなくてfindです。

    キャンセル

0

.dropdown()を実行すれば付加される機能のようなので、
クローンを調整して.dropdown()してやればよいでしょう

    $('.btn').on('click',function(){
      var clone=$('.ui.dropdown:first').clone(false).dropdown();
      clone.find('.text').addClass('default').text('Gender');
      $('.dropdown_wrapper').append(clone);
    })

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/09/15 17:56

    コメントありがとうございます。下記のコメントの通り、まだ理解が至らず確認中でございます。今しばらくお時間をください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る