title: Creating your own jquery plugin - function problem
body: <p>I'm trying to pass a function as an option through a jquery plugin that I'm building myself.</p>
  
  <p>At the moment when initializing my plugin with the following option:</p>
  
  <pre><code>$.fitAjaxSubmit({
    formId:         "new_team",
    postUrl:        "/teams/create.json",
    redirectUrl:    "/teams/",
    saveBoxText:    "Saving Team...",
    beforeSubmitFn: function(){ alert('Boo!'); }
  });
  </code></pre>
  
  <p>In my plugin I'm trying to call the <code>beforeSubmitFn</code> like so (I'm also using the ajax form plugin):</p>
  
  <pre><code>(function($){
      $.fn.fitAjaxSubmit = function(options) {
  
          var defaults = {
              formId:                 "formId",
              postUrl:                "postUrl",
              redirectUrl:            "redirectUrl",
              saveBtnId:              "save_button",
              saveBtnEnableText:      "Save",
              saveBtnDisableText:     "Saving...",
              saveBoxId:              "saving-box",
              saveBoxText:            "Saving...",
              errorMsgId:             "error_messages",
              beforeSubmitFn:         function(formData, jqForm, options) {},
              successFn:              function(response) {
                  if(response.success == true) {
                      window.location = options.redirectUrl + response.object_id;
                  } else {
                      $('#'+options.saveBtnId).removeAttr('disabled').val(options.saveBtnEnableText);
                      $('#'+options.saveBoxId).text(options.saveBoxText).fadeOut(300);
                      $('#'+options.errorMsgId).html(errorMessages(response)).hide().fadeIn(300);
                      window.scrollTo(0,0);
                  }
              }
          };
  
          var options = $.extend(defaults, options);
  
          return this.each(function() {
              $('#'+options.saveBtnId).click(function() {
  
                  $('#'+options.saveBtnId).attr('disabled', 'disabled').val(options.saveBtnDisableText);
                  $('#'+options.saveBoxId).text(options.saveBoxText).fadeIn(200);
  
                  $('#' + options.formId).ajaxForm({
                      url: options.postUrl,
                      type: "POST",
                      dataType: "json",
                      beforeSubmit: options.beforeSubmitFn,
                      success: options.successFn
                  })
              });
          });
      };
  })(jQuery);
  </code></pre>
  
  <p>For some reason the beforeSubmitFn works in Firefox however in Internet Explorer, Safari and Chrome it doesn't work at all!</p>
  
  <p>Is there something I'm missing here?</p>
  
  <p>Thanks in advance!</p>