title: How to trigger OnClick and OnClientClick events simultaneously in ASP.NET when using jQuery?
body: <p>I am trying to display a message bar during postback. I am using a jQuery script I found online <a href="http://www.andreyvoev.com/programming/jquery-plugin-messagebar/" rel="noreferrer">here</a>. Everything works great separately, but when the jQuery is added to the page my server side event is never called. </p>
  
  <p>Here is my button code:</p>
  
  <pre><code>&lt;asp:Button ID="btnGetReport" CssClass="float-left" runat="server" 
  Text="&lt;%$ Glossary:GetReport %&gt;" OnClick="btnGetReport_Click" /&gt;
  </code></pre>
  
  <p>This is the inline script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('#&lt;%=btnGetReport.ClientID%&gt;').click(function (event) {
          event.preventDefault();
          $('#message_bar').displayMessage({
              position: 'fixed',
              skin: 'modern',
              message: 'We are fetching your report. Please wait...',
          });
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the related external .js file:</p>
  
  <pre><code>(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('&lt;div class="messagebar-skin-'+options.skin+'_inner"&gt;&lt;span class="messagebar-skin-'+options.skin+'_text"&gt;&lt;/span&gt;&lt;/div&gt;').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+"&gt;div&gt;"+close_button).bind("click", function (event) {
              event.preventDefault();
              $(parent+"&gt;div&gt;"+close_button).animate({"opacity": "hide"}, function(){
                  $(parent+"&gt;div&gt;span").fadeOut("slow").html("");
                  $(parent+"&gt;div&gt;"+close_button).parent().parent().slideUp(options.speed);
              });
           });
  
    });
  
  });
  
  };
  })( jQuery );
  </code></pre>
  
  <p>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.</p>
  
  <p>Any thoughts would be greatly appreciated!</p>