2009年1月7日 星期三

solve!! jquery datepicker problem

昨天遇到有關 datepicker 的問題
今天解決了!! 先來大笑三聲 哈哈哈~~~

先來還原現場

index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
 
    <script src="jquery-ui-packed.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(function() {
            $("#btnLoad").click(function() {
                $("#pnlToLoad").load("form.html");
                $("form", "#pnlToLoad").dialog();
            });
        });
    </script>
 
</head>
<body>
    <div id="pnlToLoad" style="display: none">
        load</div>
    <input id="btnLoad" type="button" value="load" />
</body>
</html>


form.html
<form>
<input type="text" id="text1" onfocus="attachDatepicker(this)" />
</form>
 
<script type="text/javascript">
    function attachDatepicker(sender) {
        alert("!!");
        $(sender).datepicker();
    }
</script>
 



看出問題了嗎??

問題出現在 這

$("form", "#pnlToLoad").dialog();


就是在 index.html 中的這一行

因為我想讓 form load 完成後變成一個 dialog 出現
結果沒想到 dialog 會將 form 在 dom 裡面的位置改變
結果等於我按一下 load 在 dom 中就會再多一個 form 出現而且裡面 textbox 的 id 都是相同的
這樣子 jquery 的 selector 當然找不到想要的 input


改成這樣子就好了

$("#pnlToLoad").dialog();

沒有留言: