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

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

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

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

動くサンプル

html
1  <head>
2    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
3    <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>
4    <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" />
5  </head>
6  <body>
7    <div class="dropdown_wrapper">
8      <div class="ui selection dropdown">
9        <input type="hidden" name="gender">
10        <i class="dropdown icon"></i>
11        <div class="default text">Gender</div>
12        <div class="menu">
13          <div class="item" data-value="1">Male</div>
14          <div class="item" data-value="0">Female</div>
15        </div>
16      </div>
17    </div>
18    <div>
19      <button class="btn">push</button>
20    </div>
21    <script type="text/javascript">
22    $('.ui.dropdown')
23      .dropdown()
24    ;
25    $('.btn').on('click',function(){
26     var elem ='\
27      <div class="ui selection dropdown">\
28      <input type="hidden" name="gender">\
29      <i class="dropdown icon"></i>\
30      <div class="default text">Gender</div>\
31      <div class="menu">\
32        <div class="item" data-value="1">Male</div>\
33        <div class="item" data-value="0">Female</div>\
34      </div>\
35    </div>'
36     $('.dropdown_wrapper').append(elem);
37    })
38  </script>
39  </body>

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

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

投稿2021/09/15 07:30

Lhankor_Mhy

総合スコア36115

pegy

2021/09/15 07:46

ありがとうございます。シンプルな上記のサンプルでは実装できたのですが、手もとの実際のケースではうまく実装できませんでした。。この点、上手く応用ができていないのだと思いますが、以下のコード例でメソッドを追加した要素を+で連結するのは不適切なのでしょうか？結果はobject objectを返してくるので、上手く要素をprependできませんでした。。。

pegy

2021/09/15 07:46

Lhankor_Mhy

2021/09/15 07:53

「object objectを返してくる」とはどの式のことですか？ $(prepend_item)はオブジェクトですが、文字列にキャストされるような操作はなさそうですが。

pegy

2021/09/15 07:55

コメントありがとうございます。 +dropdown_year_elem_add+の要素部分でございます。

pegy

2021/09/15 07:56

drpodown()メソッドを追加すべき要素は <div class="ui selection dropdown year"> のため、このように要素を抜粋してメソッドを足した上で、連結をしてみました。

Lhankor_Mhy

2021/09/15 07:59

ああ、なるほど、年月のフォームを追加したいのですね。そしたら、ひとまずHTMLを全部作ってしまって、コンテキストで指定してメソッドを使えばいいような気がしますね。 https://api.jquery.com/jQuery/#jQuery1 コンテキストがわかりにくいのであれば、フィルタでも同じことになると思います。 https://api.jquery.com/filter/

Lhankor_Mhy

2021/09/15 08:02

$('.ui.dropdown', $(prepend_item)).dropdown() みたいな感じです。思いつきで書いていますので、適宜修正願います。

pegy

2021/09/15 08:09

コメントありがとうございます。むむ、$('.ui.dropdown', $(prepend_item)).dropdown()というのは clickしたイベントの中での処理ですよね？

Lhankor_Mhy

2021/09/15 08:10

コメント欄でご提示のコードにはイベントはなかったように思いますが。

Lhankor_Mhy

2021/09/15 08:12

あ、いや、ありましたね、失礼しました。たぶんそんな感じです。全体のコードがわからないので検証も何もしてないです。動かないこともあると思いますが、考え方は間違っていないと思いますので、細かい修正はよろしくお願いします。

Lhankor_Mhy

2021/09/15 08:14

yambejpさんのご回答のように、要件が許せばクローンしちゃうのも一つの手だと思います。

pegy

2021/09/15 08:14

ありがとうございます、少し手を動かして検証してみます！！

Lhankor_Mhy

2021/09/15 08:22

こうですかね？ https://jsfiddle.net/Lhankor_Mhy/20g4L1vw/

pegy

2021/09/15 08:41

ありがとうございます！実装することはできました。ただ、 1.未だなぜカンマで区切ったOR条件のセレクタの$(prepend_item)要素に.dropdown()メソッドを付けると動的に追加した要素も動いてくれるのかが理解ができていない点 2.本件で話が複雑になるので、含めていなかった下記の動的追加コード // $('.ui.calendar').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; // } // } // }) 3.yambejp様のcloneのパターンこれらを少し考えたいと思います。

pegy

2021/09/15 08:42

当初の質問で、処理が非常に重いのは.calnder()側でした・・もしかしたら動的にこの要素も動かせることが解決しても、処理が重さで実装したい適切ではないかもしれません。

pegy

2021/09/15 08:55 編集

calenderとはいきなりなんのことですか、なので一応格闘中なのは、こちらです↓ https://jsfiddle.net/onjwpqx1/2/

Lhankor_Mhy

2021/09/15 11:02

1 $('.ui.dropdown', $(prepend_item)) は $(prepend_item).filter('.ui.dropdown') と大体同じ意味です。２ dropdownと同じ方法でよさそうな気がします。

pegy

2021/09/15 12:07 編集

ありがとうございます。やっと直感的に理解することができました。 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; } } })

pegy

2021/09/15 12:07

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

Lhankor_Mhy

2021/09/16 00:30

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

行動規範の内容に同意します

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

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