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を評価しないのでは?と思っています。
ご教示下さい。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2011/03/18 21:41:55
  • 終了:2011/03/18 22:52:14

回答(2件)

id:a-kuma3 No.1

a-kuma3回答回数4506ベストアンサー獲得回数18702011/03/18 22:37:30

ポイント35pt

多分、こう。

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
    });
}
id:MR_sunekichi

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

2011/03/18 22:52:04
id:rikuba No.2

rikuba回答回数26ベストアンサー獲得回数122011/03/18 22:40:36

ポイント35pt

$(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
    });
  });
}
id:MR_sunekichi

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

2011/03/18 22:52:06
  • id:rikuba
    すみません。無駄な処理が入っていました。
    test関数内では$(function () {;});は外して構いません。

    function test(){
    var input_tex = '<div><input type=text id=pickdate></div>';
    document.getElementById("embed").innerHTML = input_tex;
    $("#pickdate").datepicker({
    showButtonPanel: true,
    minDate:0
    });
    }

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません