部分回发后更新面板中的 JavaScript 不起作用

Question

 <script type="text/javascript">
        $(function () {
            $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:TextBox ID="TextBox1" class="datePicker" runat="server"></asp:TextBox>
    <asp:UpdatePanel ID="holder" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
        <ContentTemplate>
            <asp:DropDownList runat="server" ID="ddl_RespondBy" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged">
                <asp:ListItem Selected="True">1 Hour</asp:ListItem>
                <asp:ListItem>Other</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="txt_RespondBy" class="datePicker" Visible="true" runat="server" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddl_RespondBy" EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>
</asp:Content>

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (ddl_RespondBy.SelectedItem.Text == "Other")
        {
            txt_RespondBy.Visible = true;
        }
        else
        {

        }
    }

我使用更新面板进行部分回发，我有两个文本框，一个在更新面板外部，一个在更新面板内部，当我从下拉列表中选择其他文本框并尝试打开 txt_RespondBy 文本框中的日历时，它不会显示，但文本更新面板外部的框显示日历。为什么部分回发后 Javascript 无法在更新面板内工作

Answer 1

将 datetimepicker 初始化代码放入 pageLoad 函数中，每当页面加载（异步或同步）时都会调用该函数。

<script type="text/javascript">
    function pageLoad(sender, args) {
        $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
    }      
</script>

Answer 2

您可以使用 pageLoad 或 .live：

参考信息：
$(document).ready() 和 pageLoad() 是不一样

.live：

Jquery .live 可以工作，但不能与 .datepicker 一起使用

$(function(){
    $('.datePicker').live('click', function() {
        $(this).datepicker({showOn:'focus'}).focus();
    });
});

pageLoad():

function pageLoad(sender, args) {
    $('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}     

Answer 3

我知道这是一个老问题，但如果有人现在或以后访问此页面寻求帮助，我也会在这里发布另一个答案。
一个可以使用

$(文档).on()

因为它确保每当页面加载时控件都会绑定到事件。它的工作与页面加载事件类似，但你可以说语法不同。几乎对于任何事情，这都有效。我的面板中有超过 50 个控件，所有控件都执行不同的任务，但我从未遇到过麻烦.. 在我使用此功能时一次也没有遇到过麻烦。

     $(document).on('eventName', 'element' , function(){
     //your code to perform some task; 
});

eventName 可以是任何事件 - 例如单击、更改、选择..

并且

元素 - 可以是名称、类名、id

示例 - 如上面的问题 -

html-

<script src="lib/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<input type="text" class="datePicker" data-provide="datepicker-inline" data-date-format="mm/dd/yyyy">

Javascript-

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