【问题标题】:Calling a Javascript function first and then CheckChanged event of a Checkbox created dynamically首先调用 Javascript 函数,然后调用动态创建的 Checkbox 的 CheckChanged 事件
【发布时间】:2010-11-23 15:12:22
【问题描述】:
在我的项目中的一个页面中,我正在创建一个复选框并在复选框检查更改时执行一些服务器端任务。我想要的是在转到后面的代码之前显示一条确认消息。
如果我正在调用 Javascript 函数,那么它会返回真/假(onclick 事件)但不会进入 CheckboxCheckChanged。
我希望显示确认消息,并且根据用户输入,它将进入代码后面的 CheckboxCheckChanged 事件中
【问题讨论】:
标签:
javascript
asp.net
checkbox
dom-events
【解决方案1】:
CheckBox1.Attributes["onclick"] = "Check();";
function Check ( elem )
{
if ( window.confirm ( "are you sure you want to do this?" ) )
{
__doPostBack ( '' , '' );
}
else
{
return false;
}
}
【解决方案2】:
JavaScript Confirm on check-box,看下面它非常简单并且有效:
<asp:CheckBox ID = "cbx_CoBorrNotPresent" runat="server" Text="Not Present"
AutoPostBack="false" TextAlign="Left" Checked="true" onclick="javascript:ChkClick();" />
<script id="igClientScript" type="text/javascript">
function ChkClick()
{
var checkBox1 = document.getElementById('ctl00_cph_PageContent_cbx_CoBorrNotPresent');
if (confirm('Are you sure?'))
{
__doPostBack('ctl00$cph_PageContent$cbx_CoBorrNotPresent', '');
}
else
{
return false;
}
};
</script>
【解决方案3】:
在使用 ASP:CheckBoxes 并将 AutoPostBack 属性设置为 true 时,我已经多次发现此问题。
如果该属性为真,ASP .NET 会在生成的 HTML 上创建一个 ugly 内联 onclick 事件,如下所示:
<input id="CheckBox1" type="checkbox" name="CheckBox1"
onclick="javascript:setTimeout('__doPostBack(\'CheckBox1\',\'\')', 0)" />
所以如果你再次设置onclick事件,它将被覆盖,并且不会发生PostBack。
我找到了一个解决方法,基本上是存储 ASP .NET 生成的原始 onclick 事件,并分配一个新的 onclick 函数,它将显示确认,如果用户选择取消它将返回 false,否则原来的点击事件会在正确的上下文和事件对象下正常执行,并且会发生回发,例如:
window.onload = function() {
var checkBox1 = document.getElementById('<%=CheckBox1.ClientID %>'),
originalOnClick = checkBox1.onclick; // store original click event
checkBox1.onclick = function(e) {
if (confirm('Are you sure?')) {
originalOnClick.call(this, e); // call the original click with the right
// context and event object
} else {
return false; // cancel the click
}
};
};
【解决方案4】:
<asp:CheckBox ID="chkbox" runat="server" AutoPostBack="false"
onclick="javascript: SomeFunction();" />
这会有所帮助。我在这方面做了很多努力并找到了解决方案。
确保“onclick”文本都是小写字母。