开发者

Calling local function with Jquery

开发者 https://www.devze.com 2023-02-01 19:23 出处:网络
I have a jQuery function as follows: (function ($) { $.fn.autoSuggest = function (data, options) { function add_selected_item(data, num) {

I have a jQuery function as follows:

(function ($) {
    $.fn.autoSuggest = function (data, options) {
        function add_selected_item(data, num) {
            (function ($) {
                $.fn.autoSuggest = function (data, options) {
                    alert(data);
                }
            })(jQuery);
        }
    }
})(jQuery);

If I wanted to call the local add_selected_item() function from outside this function, how would I do it?

I've tried doing:

$.autoSuggest.add_selected_item(data, opt);

But am getting an $.autoSuggest is undefined.

Still learning the ropes with j开发者_如何学GoQuery. I am not sure exactly how this can be accomplished, if at all.

Thanks!


Try this :

$.extend({
  autoSuggest: function(){
    ...
  }
});

or

$.fn.autoSuggest = function(){
  ...
};


The best resource for authoring a properly structured jQuery plugin is the Plugins/Authoring documentation. The part that is relevant to your post is the Namespacing section.

To summarize, you are defining the function add_selected_item inside another function, which scopes it to within the autoSuggest function. This means that add_selected_item can only be invoked from inside the autoSuggest. This is why your previous attempts yield undefined when you try to access it.

Your solution is very close to the sample stub provided in the jQuery documentation. Have a look at the following, specifically the lines after "Method calling logic":

(function( $ ){

  var methods = {
    init : function( options ) { // THIS },
    show : function( ) { // IS   },
    hide : function( ) { // GOOD },
    update : function( content ) { // !!! }
  };

  $.fn.tooltip = function( method ) {

    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );

The usage of the "internal" functions inside this plugin are as follows:

$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

You can apply this same pattern to your plugin, like this:

(function($) {
    var methods = {
        init: function(data, options) {
            //put your init logic here.
        },
        add_selected_item: function(data, num) {
            //here's your other method
        }
    };

    $.fn.autoSuggest = function(method) {
        // Method calling logic
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.autoSuggest');
        }
    };
})(jQuery);

Note: I have not tested the above code, since I do not know the intentions of your plugin. Use this merely as a suggestion on how to restructure your code.

0

精彩评论

暂无评论...
验证码 换一张
取 消