人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryでdatepickerを利用しようと思っています。
下記の通りにhtmlで書いてブラウザで開くと、
テキストボックスをクリックしたところでdatepickerが現れて正しく操作する事ができます。
これをinnerHTMLで動的に実現したいのですが上手く行きません。

【成功例】
<script type="text/javascript">
$(function() {
$("#pickdate").datepicker({
showButtonPanel: true,
minDate:0
});
</javascript>

:

<div><input type=text id=pickdate></div>



【動かない例】
<script type="text/javascript">
$(function() {
$("#pickdate").datepicker({
showButtonPanel: true,
minDate:0
});

function test(){
var input_tex = '<div><input type=text id=pickdate></div>';
document.getElementById("embed").innerHTML = input_tex;
}

</javascript>

:

<SPAN ID="embed"></SPAN>
<input type=button onclick="test()">




配置したボタンをクリックするとdatepickerを呼び出すテキストボックスが動的に挿入されます。
しかし、テキストボックスをクリックしてもdatepickerがでてきません。
つまり、HTMLに直打ちしたときには上手く動作するのに
innerHTMLで動的に挿入したHTMLを実行しようとすると上手く実行できません。

innerHTMLで挿入したHTMLではidを評価しないのでは?と思っています。
ご教示下さい。

●質問者: かすかべぼうえいたい
●カテゴリ:ウェブ制作
✍キーワード:HTML jQuery test クリック テキスト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●35ポイント

多分、こう。

function test(){
 var input_tex = '<div><input type=text id=pickdate></div>';
 document.getElementById("embed").innerHTML = input_tex;
 $(function() {
 $("#pickdate").datepicker({
 showButtonPanel: true,
 minDate:0
 });
}
◎質問者からの返答

できました!ありがとうございます!


2 ● rikuba
●35ポイント

$(function () {;});つまりjQuery(function () {;});はDOM構築時に発火されます。

その時点ではまだページにid="pickdate"の要素は存在しないため、エラーとなります。

test()関数内でid="pickdate"の要素を作成後に、datepickerを当てる処理を移せば動きます。

function test(){
 var input_tex = '<div><input type=text id=pickdate></div>';
 document.getElementById("embed").innerHTML = input_tex;
 $(function() {
 $("#pickdate").datepicker({
 showButtonPanel: true,
 minDate:0
 });
 });
}
◎質問者からの返答

できました!ありがとうございます!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ