動的に生成した項目へのイベントの定義

Question

前提・実現したいこと

チャット機能の実装を検討しており、websocketでサーバーと送受信を行い、発言を検知したらその発言を吹き出し上のボックスに表示しようとしています。
javascipt上で、発言を検知したときに、以下のコードをhtmlにappendする仕組みです。

<div class="hoge" id = "messagebox-id"> ・・・ ・・・ <div> (idはGUID)

この動的に作成したボックスに「ある項目をドラッグし、このボックスにドロップしたときに処理を行う」機能を実装したく、以下のように定義しました。
$(document).on('drop','[id^=messagebox]',function(e){
alert('ドロップ機能の組み込み');
})

しかし、この通りに実装をしたところ、このjsファイルは実行されていませんでした。（F12の開発者ツールでブレークポイントを設置したのですが、該当行を通りませんでした。）
上記の機能を実現するためには、どのような実装方法が必要でしょうか。

Answer 1

動的に作成すると言うことは、初期状態では対象が 0 ではないですか？
その状態で $(document).on() を書いたとしても、対象がいないからアタッチされないでしょう。

HTML を append しているのですから、そのすぐ後で「今append した <div>」に対するイベントハンドラを追加してやればいいのでは？

Comments

[think49]

高評価がついていますが、本当にそうなのでしょうか。
document は存在しているので、イベントのアタッチは成功しているように読めますが…。

[toshiki_iwata]

tacsheaven様　think49様
ご回答ありがとうございます。
>tacsheaven様
ありがとうございます。一度その方法で試してみて再度回答させていただきます。
>think49様
まだ私は高評価を押下しておりませんので、おそらくほかの方かもしれません。
コードの書き方としては「chat_room.html」と「app.js」があり、app.js側でchat_room.htmlの「main」というidに対してのappend処理を記載しています。dropの処理もapp.jsです。
_______
app.js
「$('main').append(<div class="hoge" id = "messagebox-id">
・・・
・・・
<div>)」

[think49]

dropイベントはアタッチされていました。
https://codepen.io/anon/pen/KLJoyX

[tacsheaven]

だとすると drop 自体が発生しない、ということで終わりかと思います。

[toshiki_iwata]

tacsheaven様　think49様
貴重なお時間を割かれての再度のご回答、ありがとうございます。
お二人のご助言をいただきつつ、こちらも試していたのですが、やはりうまくいきませんでした。
例えば以下のような対応はうまくいくのですが、「動的に生成する」かつ「drop」だとイベントが発生しないのですかね・・・
①静的な項目「txthoge～」に対してドロップイベントを定義する。
$(document).on('drop','[id^=txthoge]',function(e){
alert('ドロップ機能の組み込み');
})
②動的な項目にclickイベントを仕込む
$(document).on('click','[id^=messagebox]',function(e){
alert('ドロップ機能の組み込み');
})

[toshiki_iwata]

なお、htmlへは以下のコードをhtmlにappendしています。
var tagstring =
<div class="chat-convo d-flex flex-row my-2" id="messagebox-${this.id}">
<ul class="chat-convo chat-info m-1">
<li class="chat-convo chat-datetime" id = time-${this.id}>${moment(this.datetime).format('HH:mm:ss')}</li>
<li class="chat-convo chat-username"id = speaker-${this.id}>${this.username_last}</li>
</ul>
<div id = 'testy-${this.id}" class="rounded-lg flex-fill chat-convo chat-box ${this.usertype}">
<span class="chat-convo chat-message" id="text-${this.id}">${this.message}
<div class="chat-convo chat-tags">
<ul id = "tagtable-${this.id} class="list-group list-group-horizontal">
</ul>
</div>
</div>
</div>`
$('main').append(tagstring)

[think49]

@toshiki_iwata さん
コードの追記はコメントにするのではなく、質問本文にmarkdownで追記して下さい。

ここに書くのもなんですが、私はyambejpさんがコメントされた内容が正解だと思いますよ。
検証すれば分かるのですから、本番コードとは別に「最小限のコード」を書いて切り分けしましょう。
そして、「yambejpさんに」返信しましょう。

Answer 2

id = "messagebox-id"

だとスタティックに「messagebox-id」というidを指定しています。
これが複数存在するとidが競合するのでNGです

Comments

[toshiki_iwata]

>yambejpさん
ご回答ありがとうございます。
申し訳ございません。記載方法に誤りがありました。
ここでいうidはguid値をとっています。
そのため、各idは「messagebox-xxxx-xxxx....」等と発言事に毎回ランダムなidを杯盤しているイメージです。

[yambejp]

[id^=messagebox]のHTML要素がドロッパブルな属性をもってないのでは？