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

Я понимаю, что это старый вопрос, но также я публикую еще один ответ здесь, если кто-то посетит эту страницу сейчас или в более позднее время для помощи. можно использовать

$ (документ) .он ()

, поскольку он обеспечивает привязку элементов управления к событиям при загрузке страницы. Его работа похожа на событие загрузки страницы, но вы можете сказать, что синтаксис другой. И почти для всего и вся это работает. У меня более 50 элементов управления на панели, и все они выполняют разные задачи, и у меня никогда не было проблем ... ни разу, когда я использовал эту функцию.

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

eventName может быть любым событием - например, щелкнуть, изменить, выбрать ..

И

Элемент - может быть именем, именем класса, идентификатором

пример - как и выше вопрос -

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();
    });
});