1. ホーム
  2. jquery

[解決済み] 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 .