创建自己的 jquery 插件 - 功能问题答案

【问题标题】：Creating your own jquery plugin - function problem创建自己的 jquery 插件 - 功能问题
【发布时间】：2009-09-23 08:54:47
【问题描述】：

我正在尝试通过我自己构建的 jquery 插件将函数作为选项传递。

在使用以下选项初始化我的插件时：

$.fitAjaxSubmit({
  formId:         "new_team",
  postUrl:        "/teams/create.json",
  redirectUrl:    "/teams/",
  saveBoxText:    "Saving Team...",
  beforeSubmitFn: function(){ alert('Boo!'); }
});

在我的插件中，我尝试像这样调用beforeSubmitFn（我也在使用 ajax 表单插件）：

(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);

由于某种原因，beforeSubmitFn 在 Firefox 中有效，但在 Internet Explorer、Safari 和 Chrome 中却完全无效！

这里有什么我遗漏的吗？

提前致谢！

【问题讨论】：

当您访问选项时，它可能已经超出范围。其余选项值是否有效？你能给我们多一点代码吗？
刚刚添加了更多代码！谢谢大家！
似乎与这一行隔离 $('#'+options.saveBtnId).attr('disabled', 'disabled').val(options.saveBtnDisableText); - 不知道为什么！

标签： jquery function plugins

【解决方案1】：

在这里猜测，因为您没有显示所有代码。您在此处发布的代码看起来不错。

IE 和大多数其他浏览器处理对象映射格式略有不同。您可能会在选项定义中检查额外的逗号。

【讨论】：

似乎不是逗号引起的问题，IE也不会抛出JS错误