*

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

公開日: 備忘録 ,

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

関連記事

iMac再インストール:Eclipseにテーマを適用

iMacの再インストールが終わりましたが 色々と環境設定が残っています。 今日は私が使ってい

記事を読む

備忘録:prettyPopinで開くポップアップページに画像を表示する場合の注意点

「iPad Air」「iPad Mini Retina」来月発売ですね。皆さんは購入されますか?私は

記事を読む

MAC osx10.9 MavericksとiPhoneで地図情報を共有

osx10.9で「map」がmacにも追加されましたが、皆さんお使いですか? iPhoneをお

記事を読む

jQuery tooltipの備忘録

Concrete5の外部フォームの記事は業務多忙の為、遅れています。期待している方がもしもいらっしゃ

記事を読む

MAC OSX10.9 Mavericksをクリーンインストール・USBメモリ編

先日、Mac OSX10.9 MavericksをMBAにクリーンインストールを書きましたが、iMa

記事を読む

Eclipse(IDE)のインストールについて

PHP関連の開発をメインに行なっていますが、 開発環境のEclipseのインストールについて簡単に

記事を読む

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

あけましておめでとうございます。 本年もよろしくお願いいたします。 昨年は様々なことが有

記事を読む

WordPressのダッシュボードでJetpackのアクセス解析グラフが表示されない

サッカーワールドカップの組み合わせ抽選会速報なんて書いちゃいました。注目キーワードにあやかって

記事を読む

Stinger3カスタマイズ 一覧系ページのショートコードに関する不具合

ブログの構築を行っている途中に気がついた不具合を修正しました エントリ一覧系のページで本文の

記事を読む

no image

備忘録:jQueryのlive-clickがiPadで効かない

ちょっと忙しく、ブロクが更新できていませんが jQueryを利用してiPadでのウェブアプリケ

記事を読む

Message

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

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

ad

忙しときに限って、PCがこわれる・・・

久々の投稿 忙しいときに限って、PCが壊れるのは昔から・・・・

年末年始休業のお知らせ

平素は、弊社製品をご愛顧いただき、ありがとうございます。 誠に勝

年末年始休業のお知らせ

平素は、弊社製品をご愛顧いただき、ありがとうございます。 誠に勝

夏季休業のお知らせ

夏季休業のお知らせ 平素は、弊社製品をご愛顧いただき、ありがとう

臨時休業のお知らせ(3月30日〜4月1日)

平素は、弊社製品をご愛顧いただき、ありがとうございます。 誠に勝手な

→もっと見る

PAGE TOP ↑