的jQuery UI的日期選擇器沒有出現

我嘗試做一些代碼與jQuery UI的即時知道爲什麼它不工作的jQuery UI的日期選擇器沒有出現

我的HTML代碼

<a>open form</a> 
<div></div>

我的js代碼是

$(document).ready(function(){ 
    $("a").click(function(){ 
     $.ajax({ 
      url:"data.php", 
      success:function(data){ 
       $("div").html(data); 
      } 
     }); 
    }); 
}) 
$(function(){ 
    $("input").on('click', function(){ $(this).datepicker(); }); 
});

and data.php contains

<input type="text" />

結果是，爲什麼datepicker沒有出現..？

和另外一個問題是這樣的代碼

(document).ready(function(){ 
    $("a").click(function(){ 
     $("div").html("<input id='datepicker'><input id='tb_submit' type='submit' value='Submit' />"); 
    }); 
}) 
$(function(){ 
    $("body").on('click', "input#datepicker",function(){ $(this).datepicker(); }); 
    $("body").on('click','input#tb_submit',function(){$(this).button();}) 
});

的按鈕應該被點擊，則顯示出真正的按鈕。你有解決方案嗎？

現場代碼：http://jsfiddle.net/5Ps6P/28/

來源

2013-02-28 Jin Sun

我不明白，爲什麼會出現？我沒有看到任何地方對datepicker的引用.... – RMalke 2013-02-28 01:59:44

對不起，編輯... – 2013-02-28 02:00:47

調用'$（this）.datepicker（）'不會使datepicker出現，它只是將datepicker綁定到元素。日期選擇器在你點擊元素時出現。 – Barmar 2013-02-28 02:07:47

試圖改變你的代碼：

編輯：

$(document).ready(function(){ 
    $("a").click(function(){ 
     $.ajax({ 
      url:"data.php", 
      success:function(data){ 
       var newInput = $(data); 
       newInput.datepicker(); 
       $("div").html(newInput); 
      } 
     }); 
    }); 
})

來源

2013-02-28 02:05:15 RMalke

是很好，但是當我使用帶有很多輸入的表單時，驗證時會更復雜。不是嗎？ HTTP：//的jsfiddle。net/5Ps6P/10/ – 2013-02-28 02:11:50

它只會爲每個添加的元素調用datepicker方法，所以，如果你的data.php確實返回多個輸入，將無法正常工作 – RMalke 2013-02-28 02:15:52

是的，這是正確的，即時只是測試一個輸入，但結果是讓我失望。如果我使用了很多輸入，那麼壓力我..？ – 2013-02-28 02:20:34

This should work : 
$(document).ready(function(){ 

$("a").click(function(){ 
    $("div").html("<input id='datepicker' type='text'>"); 
    $("#datepicker").datepicker(); 
}); 



})

但是我建議使輸入被隱藏和顯示當鏈接被點擊時。這將確保您的事件綁定到DOC創建時的輸入。

來源

2013-02-28 02:05:16 user1428716

其不工作，我測試了代碼 – 2013-02-28 02:10:52

您能顯示腳本導出順序嗎？ .. .. – user1428716 2013-02-28 02:11:56

http://jsfiddle.net/5Ps6P/12/ 這是代碼 – 2013-02-28 02:16:47

試試這個代碼：

$(function(){ 
    $(document).on('click', "input",function(){ $(this).datepicker(); }); 
});

使用此代碼：

$(document).ready(function(){ 
    $("a").click(function(){ 
     $("div").html("<input id='datepicker'><input id='tb_submit' type='submit' value='Submit' />"); 
     $("input#datepicker").datepicker(); 
     $('input#tb_submit').button(); 
    }); 
})

你只需將它添加後初始化它，不需要綁定自己的點擊處理程序。

這裏是jsfiddle。 http://jsfiddle.net/5Ps6P/30/

來源

2013-02-28 02:05:52 pktangyue

哇驚人，它有用http://jsfiddle.net/5Ps6P/21/但如何提交，與許多輸入形式..？ – 2013-02-28 02:24:02

@JinSun你的意思是'$（document）.on（'submit'，'form'，function（）{}）;'？ – pktangyue 2013-02-28 02:29:13

是的，它的真實.. 但現在我有另一個問題，其編輯在我的文章 – 2013-02-28 10:12:52

-1

嘗試使用live（）jQuery函數來偵聽頁面加載後插入的元素。

// listen to clicks on input elements 
$('input').live('click', function() { 

    // apply datepicker to this input element 
    $(this).datepicker(); 
});

附加的事件處理程序的當前選擇，現在和將來匹配所有元素。 http://api.jquery.com/live/

來源

2013-02-28 02:07:45 cre8value

測試，http://jsfiddle.net/5Ps6P/9/ 打開它，它不工作 – 2013-02-28 02:13:20

的jQuery UI的日期選擇器沒有出現

回答

相關問題