Question

我正在使用插件替换window.showmodalDialog。但是，每当我尝试调用我的插件函数时，我都会收到典型且可怕的＆＃34;对象不支持此方法＆＃34;。

我已经将我的插件简化为显示一个简单的警告框。

( function ( $ )
{
    $.fn.showAlert = function ()
    {
        alert( "Hello There" );
    }
} )( jQuery );

这是放在一个单独的JavaScript文件中，包含在我想要调用该函数的页面上，我按这样调用函数：$ .showAlert（）;

执行该行会导致错误。

如果我将代码进一步降低并使其成为一个直接的函数，

( function ( $ )
{
    alert( "Hello There" );
} )( jQuery );

一旦页面加载，警告框就会弹出。

我确信我做错了什么，但我无法弄清楚它是什么。我已经搜索了这个错误并查看了所有我可以确定的是我正在构建我的插件。

修改

努力提供全面披露。在我们的应用程序中，我们有一个JavaScript文件optionActions.js，它提供了几种不同的方法来打开新窗口。其中一个功能是打开一个模态对话框openModal。此函数采用几个参数来定义模态窗口。该函数的基本结构是

function openModal(strCategory, objParam, strFeatures, strModule)
{
    //Various code and function calls to format the incoming data for the modal window

    //Provides a single object containing the necessary parameters and data for the modal window
    var objDialogIn = new OBJDIALOGIN( objParam );         

    return window.showModalDialog(strUrl, objDialogIn, strFeatures);
}

因此修改此函数以使用我的新插件应该是这样的。

//Include the JS file containing the definition for "showAlert"
document.write( "<script LANGUAGE=JavaScript src='/js/ModalDialog.js'></script>" );

function openModal(strCategory, objParam, strFeatures, strModule)
{
    //Various code and function calls to format the incoming data for the modal window

    //Provides a single object containing the necessary parameters and data for the modal window
    var objDialogIn = new OBJDIALOGIN( objParam ); 

    $( "body" ).showAlert();
}

根据目前为止的回复，ModalDialog.js文件包含以下内容。

( function ( $ )
{
    $.fn.showAlert = function ()
    {
        alert( "Hello There" );
    }
} )( jQuery );

现在，optionActions.js文件包含在我们应用程序的每个其他html页面中。

所以，使用这些建议，我添加了一个选择器来附加showAlert函数。我的方法是选择器不为null或未定义。

基本上，我有一个包含optionActions.js文件的html模块。 optionActions.js包含openModal函数。从html模块中的脚本块调用openModal。 optionActions包含ModalDialog.js模块，其中包含showAlert函数。

因此，当html模块加载对openModal的调用时，应触发showAlert，但showAlert未定义。

我希望这能更好地解决我的困境。

Answer 1

因为$.fn期待选择器。使用您的代码，这工作正常： $('body').showAlert();

这不是：

$.showAlert();

要在jquery对象上创建它，请删除.fn

(function($){
    $.showAlert = function (){
        alert( "Hello There" );
    }
})(jQuery);

$.showAlert();//works

Answer 2

使用fn作为实例方法时，它可以正常工作。

(function($) {
      $.fn.showAlert = function() {
        alert("Hello There");
      }
    })(jQuery);

    $("body").showAlert();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

JQuery自定义插件功能无法识别

2 个答案: