備忘録

備忘録:jQueryで追加されたDOM要素にイベントを割り当てる

投稿日:2012年2月15日 更新日:

jQueryを多用して、WEBベースの管理システムを開発中です。

append等で、初期表示されたHTMLに要素を追加する際の注意点

Javascriptでは初期表示された際の各要素にはイベントが割り当てられますが
append等で追加された要素には何もしないとイベントが割り当てられないようです。
(使っている用語が間違っているかもしれませんが・・・)

動作させるには、jQueryのバージョンが1.3になって増えた新機能「live()」を使用します。

→live(type, fn) – jQuery 1.3.1 日本語リファレンス

ある管理画面で、
ajaxを利用して表示された検索結果から、入力フィールドを追加する機能を作っているのですが
追加された入力フィールドでdatepickerを使う必要がありました。

単純に

jQuery(function($){
	$(".classname").datepicker({
		dateFormat: 'yy-mm-dd'
	});
}

function hogehoge(){
	html = '<input type="text" class="classname" />';
	$('#hogehoge').append(html);
}

で追加した入力フィールドに、フォーカスインしても、datepickerが表示されません。

jQuery(function($){
	$(".classname").datepicker({
		dateFormat: 'yy-mm-dd'
	});
}

function hogehoge(){
	$('.datepicker').live('focusin',function(){
		$(".classname").datepicker({
			dateFormat: 'yy-mm-dd'
		});
	});
	html = '<input type="text" class="classname" />';
	$('#hogehoge').append(html);
}

これで動作します。

1行目から6行目で初期表示された入力フィールドにdatepickerを適用します。
7行目からが要素を追加する部分です。
8行目で追加された要素に”focusin”イベントを割り当てています。

忘れないように・・・

ad

ad

-備忘録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スパム対策 * Time limit is exhausted. Please reload the CAPTCHA.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

jQuery tooltipの備忘録

Concrete5の外部フォームの記事は業務多忙の為、遅れています。期待している方がもしもいらっしゃったらばすみません・・・ 今日はjQueryのtooltipに関する備忘録です。 jQueryのto …

PHP:ソケット通信サーバ・テスト用シミュレータの作成

久々にPHPでソケット通信アプリを開発してます。WEBシステムで管理ページを開発し、設定内容をDBではなくSocket通信でアプリケーションに渡すというものです。 通知先のアプリケーションは開発環境に …

備忘録:jQuery-Datepickerの使い方

備忘録 いろいろな管理画面を開発している重宝する「Datepicker」ですが 過去のプロジェクトからコピペして新しいプロジェクトでも利用しています 過去のプロジェクトを開くのも面倒なので備忘録として …

備忘録:Facebookページで「いいね」がクリックされているかどうかを判定

あけましておめでとうございます。 本年もよろしくお願いいたします。 昨年は様々なことが有りました。良いことも、悪いことも・・・今年は悪いことがないように願いたいものです。 さて、年末年始休暇中にFac …

使い勝手の良いアクセス解析 Research Artisan Lite

備忘録です。 アクセス解析ソフトはいろいろありますが 最近のデフォルトは 「Google Analytics」 + 「Research Artisan Lite(非改造)」 ひとまず十分な感じ Res …