如何在部分视图中动态加载后使JQuery DatePicker工作？

Question

我在这个场景中丢失了jquery datepicker功能......

1-最初我有一个普通的视图,工作正常,有这个日期输入代码...

<input type="text" name="date_start" id="date_start"
                       value="@(Model.TimeStart)" />
<script language="javascript" type="text/javascript">
    $("#date_start").datepicker();
</script>

2-然后,我在部分视图中转换了该视图,动态加载了...

$('#TargetEmptyDiv').load("/MyController/MyAction");

3-部分视图加载正常,数据可以(手动)输入并且一切正常.唯一的问题是jquery datepicker不再有效.我试着在加载后分配它,使用这个......

$('#TargetEmptyDiv').load("/MyController/MyAction",
                          function () { $("#date_start").datepicker(); });

那没用.

4-后来我了解到jquery提供了live()和delegate()函数,这些函数能够将javascript代码附加到"现在和将来"加载的元素中.所以,我在文档初始化中尝试了这个...

<script type="text/javascript">
    $(document).ready(function () {
           $("#date_start").live("click", function () { $(this).datepicker(); });
    });
</script>

后来也......

<script type="text/javascript">
    $(document).ready(function () {
           $("#date_start").delegate("click", function () { $(this).datepicker(); });
    });
</script>

没有一个工作,可能是因为他们直接引用了"click"事件,但是datepicker是"附加"(如果这是正确的术语)整个元素.

所以,问题是:如何使jquery datepicker适用于动态加载后加载的元素???

谢谢你的时间!

已解决:问题是在_Layout.cshtml的底部有这条线...

@Scripts.Render("~/bundles/jquery")

..which加载jquery库的缩小版本(已经由我自己引用).因此,库被加载两次并且无效,产生错误"datepicker()不是函数".

只是评论或删除该行,使所有工作正常!

Answer 1

在我看来，#3 中的方法应该有效，因此您似乎需要进行一些调试。尝试这个：

1. 如果您使用 Firefox，请获取 Firebug 扩展（Chrome 内置了开发工具）
2. 在您的代码中添加debugger一行（例如见下文）
3. 使用 Chrome 或 Firebug/Firefox（或任何其他浏览器的开发工具）加载您的页面

应该发生的是您的浏览器将在此时暂停。但是，如果事情没有按您的预期工作，它可能根本不会命中该代码，然后您就不会再有任何停顿。

如果确实暂停，请使用控制台检查 ; 的值$("#date_start")。jQuery 选择器可能没有抓住您认为的内容。

这是debugger您的代码的示例：

$('#TargetEmptyDiv').load("/MyController/MyAction", function () {
    debugger;
    $("#date_start").datepicker();
});