[解決済み] jQueryで動的要素にon(keyup)をバインドする(Twitter Bootstrap + typehead)
2022-03-12 14:04:03
質問
このタイトルを読んで、眉をひそめた方もいらっしゃるのではないでしょうか?このような質問はよくあることだと思いますが、私のような質問はあまり見かけませんので、試してみました。動的に作成された要素にイベントをバインドすることは、私の急所であり、私はそれを理解することができません...
Twitter Boostrapを使用しています。
typehead()
プラグインを使用します。私は
この仕掛け
を使用して、遠隔地のデータソースで動作するようにしました。この時点では、すべてがうまくいっています。フォームのテキスト入力をクリックし、タグ付けすると、スクリプトが外部ソースを読み込んで、ドロップダウンが表示されます。しかし、動的な要素を作成しているのですが、その要素では動作しないことがわかりました。私は
live()
メソッドがありますが、スクリプトがどのように実行されるかを見ていると、どのように実装すればいいのかわかりません。
$('#anInputField').typeahead().on('keyup', function(ev){
// stuff happens
});
キー入力があるたびに、スクリプトはjSONリクエストを発行し、彼のものをチェックし、その結果を
typehead()
オートコンプリートの部分を行う人です。では、最初のバインディングの後に作成された#aDropdownIDを見るようにjQueryに指示するにはどうすればよいでしょうか。そこで
live()
を使用しますが
on()
に置き換わる... という感じです。
よろしくお願いします。
解決方法は?
対象
on()
をデリゲートできるようにするには、常にそこにあることがわかっている静的要素でそれを呼び出し、次に動的要素を渡す必要があります。
$('#static-parent').on('keyup', '#aDropdownID', function(ev){
// stuff happens
});
静的な親要素がない場合は、常に
body
.
関連
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] BootstrapのモーダルウィンドウをjQueryで開くには?
-
[解決済み] Twitter Bootstrapでナビバーの色を変更する
-
[解決済み] Twitter Bootstrap Form File Element Upload Button(ファイルアップロードボタン
-
[解決済み] Twitter Bootstrapのモーダルクローズに関数をバインドする
-
[解決済み] Twitter Bootstrapを使った中央寄せのコンテンツはどうなっているのか?
-
[解決済み] Twitter Bootstrapのモーダルウィンドウを閉じないようにする
-
[解決済み] Twitter Bootstrap - 行と行の間に上部のスペースを追加する
-
[解決済み】Twitter Bootstrapのツールチップを動的に作成された要素に結合するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQuery .load()が動作しない
-
[解決済み] jQuery - 不正な呼び出し
-
[解決済み] Javascriptでの改行の分割方法
-
[解決済み] JQueryの使用 - フォームが送信されないようにする
-
[解決済み] jQueryでdiv内のspanにテキストを追加する
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] ネストした多次元のjsonオブジェクトの書き方
-
[解決済み] jquery autocomplete が動作しない
-
[解決済み] jQuery Mobileのボタンを無効にする
-
[解決済み] jqueryでラジオボタンを検証する?