Javascript 使用 jQuery 时如何在 ASP.NET 中同时触发 OnClick 和 OnClientClick 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11453985/
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
How to trigger OnClick and OnClientClick events simultaneously in ASP.NET when using jQuery?
提问by jfielaidof
I am trying to display a message bar during postback. I am using a jQuery script I found online here. Everything works great separately, but when the jQuery is added to the page my server side event is never called.
我试图在回发期间显示消息栏。我正在使用我在这里在线找到的 jQuery 脚本。一切都单独运行很好，但是当将 jQuery 添加到页面时，我的服务器端事件永远不会被调用。
Here is my button code:
这是我的按钮代码：
<asp:Button ID="btnGetReport" CssClass="float-left" runat="server"
Text="<%$ Glossary:GetReport %>" OnClick="btnGetReport_Click" />
This is the inline script:
这是内联脚本：
<script type="text/javascript">
$(document).ready(function () {
$('#<%=btnGetReport.ClientID%>').click(function (event) {
event.preventDefault();
$('#message_bar').displayMessage({
position: 'fixed',
skin: 'modern',
message: 'We are fetching your report. Please wait...',
});
});
});
</script>
This is the related external .js file:
这是相关的外部 .js 文件：
(function( $ ){
$.fn.displayMessage = function(options) {
// Default configuration properties.
var defaults = {
message : 'Error message',
speed : 'fast',
position : 'fixed', // relative, absolute, fixed
autohide : true
}
var options = $.extend( defaults, options );
$(this).slideUp('fast');
$(this).removeClass().empty();
return this.each(function() {
var sticky = (options.sticky == false) ? 'relative' : 'absolute';
$(this).addClass('messagebar-skin-'+options.skin+'_bar').css('position',options.position).css('background-color',options.background);
$(this).append('<div class="messagebar-skin-'+options.skin+'_inner"><span class="messagebar-skin-'+options.skin+'_text"></span></div>').css('color',options.color);
$(this).find('span').html(options.message);
$(this).slideDown(options.speed ,function(){
var parent = ($(this).attr('id')) ? "#"+$(this).attr('id') : "."+$(this).attr('class');
var close_button = ($(this).find('a').attr('id')) ? "#"+$(this).find('a').attr('id') : "."+$(this).find('a').attr('class');
if(options.autohide == true)
{
$(this).delay(2400).fadeOut('slow');
}
$(parent+">div>"+close_button).bind("click", function (event) {
event.preventDefault();
$(parent+">div>"+close_button).animate({"opacity": "hide"}, function(){
$(parent+">div>span").fadeOut("slow").html("");
$(parent+">div>"+close_button).parent().parent().slideUp(options.speed);
});
});
});
});
};
})( jQuery );
I have also tried calling the function with the OnClientClick property, but neither one seems to work. I looked at other examples where people were having issues with this but none of them seemed to help either.
我还尝试使用 OnClientClick 属性调用该函数，但似乎都不起作用。我查看了其他示例，其中人们对此有疑问，但似乎也没有任何帮助。
Any thoughts would be greatly appreciated!
任何想法将不胜感激！
采纳答案by Jupaol
Have you tried something simple like:
你有没有尝试过一些简单的事情，比如：
OnClientClick="return YourJavaScriptFunction();"
<asp:Button ID="btnGetReport" CssClass="float-left" runat="server"
Text="<%$ Glossary:GetReport %>" OnClick="btnGetReport_Click"
OnClientClick="return YourJavaScriptFunction();" />
and in your JavaScript function return trueat the end
并在你的JavaScript函数返回true末
function YourJavaScriptFunction () {
// your cool stuff
return true;
}
Edit 1
编辑 1
This line:
这一行：
OnClientClick="return YourJavaScriptFunction();"
It's the equivalent to:
它相当于：
$('#<%=btnGetReport.ClientID%>').click(function () {
Your script would look like:
你的脚本看起来像：
<script type="text/javascript">
function YourJavaScriptFunction (){
$('#message_bar').displayMessage({
position: 'fixed',
skin: 'modern',
message: 'We are fetching your report. Please wait...'
});
// this will prevent the postback, equivalent to: event.preventDefault();
return false;
}
</script>
回答by Kapil Khandelwal
Try this:
尝试这个：
<script type="text/javascript">
$(document).ready(function () {
$('#<%=btnGetReport.ClientID%>').click(function (event) {
event.preventDefault();
$('#message_bar').displayMessage({
position: 'fixed',
skin: 'modern',
message: 'We are fetching your report. Please wait...',
});
__doPostBack("btnGetReport", "");
});
});
</script>
if using Master Page then try this:
如果使用母版页，请尝试以下操作：
__doPostBack("ctl00$MainContent$btnGetReport", "");
