部分回发后，更新面板中的 Javascript 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7823969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript in update panel doesn't work after partial postback
提问by Mark
<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
{
}
}
I do partial post back with the update panel, I have two text box one outside update panel and one inside, when I select other from the dropdown and try to open the calendar inside the txt_RespondBy text box it doesn't show, but the text box outside update panel shows the calendar. why is Javascript not working inside update panel after partial postback
我用更新面板做部分回发，我有两个文本框，一个在更新面板外面，一个在里面，当我从下拉列表中选择另一个并尝试打开 txt_RespondBy 文本框内的日历时，它不显示，但文本更新面板外的框显示日历。为什么 Javascript 在部分回发后无法在更新面板内工作
回答by jdavies
Place your datetimepicker initialisation code in the pageLoad function, which is called whenever the page loads (asynchronously or synchronously).
将您的 datetimepicker 初始化代码放在 pageLoad 函数中，该函数在页面加载（异步或同步）时调用。
<script type="text/javascript">
function pageLoad(sender, args) {
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}
</script>
回答by rick schott
You can use pageLoador .live:
您可以使用pageLoad或.live：
Reference info: $(document).ready() and pageLoad() are not the same
参考信息： $(document).ready() 和 pageLoad() 不一样
.live:
。居住：
Jquery .live works but not with .datepicker
Jquery .live 有效但不适用于 .datepicker
$(function(){
$('.datePicker').live('click', function() {
$(this).datepicker({showOn:'focus'}).focus();
});
});
pageLoad():
页面加载（）：
function pageLoad(sender, args) {
$('.datePicker').datetimepicker({ dateFormat: 'dd/mm/yy' });
}
回答by Usha phulwani
I understand this is a old question but then also I am posting one more answer here if someone visit this page now or in later times for help. one can use
我知道这是一个老问题，但如果有人现在或以后访问此页面寻求帮助，我也会在这里发布更多答案。一个可以使用
$(document).on()
$(文档).on()
as it makes sure that controls bind to the events whenever page loads. Its job is Similar to page load event but you can say syntax is different. And almost for anything and everything this works. I have more than 50 controls in a panel and all to perform different task and I never got into trouble.. not even once as i was using this function.
因为它确保控件在页面加载时绑定到事件。它的工作类似于页面加载事件，但您可以说语法不同。几乎对于任何事情和一切都有效。我在一个面板中有 50 多个控件，所有控件都用于执行不同的任务，而且我从未遇到过麻烦.. 在我使用此功能时甚至一次都没有。
$(document).on('eventName', 'element' , function(){
//your code to perform some task;
});
eventName can be any event - like click, change, select..
eventName 可以是任何事件 - 如单击、更改、选择..
And
和
Element - can be a name, classname, id
元素 - 可以是名称、类名、id
example - as above question -
示例 - 如上问题 -
html -
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 -
Javascript -
$(function(){
$(document).on('click', '.datePicker' , function(){
$(this).datepicker();
});
});
