Question

Can Anybody explain why this happen?

This is my code in a plugin called something:

(function($){
$.fn.extend({
    something: function(options) {
       // Here I define defaults
       $(this).bind('change', function () { 
          return $(this).each(function() {
          // a function body
          });
       });
     }
});
})(jQuery);

and I call this plugin in another js like this:

var myarray=new Array();
myarray[0] = $('#selector').something({
regex:/^([\u0600-\u06FF]|\s)*$/,
    // another options
    });
$('#selector').change(function (){
    alert (myarray[0]);
});

in every change in my selector it returns me undefined.

It completely make me insane. Thanks if anyone can help me.

Edit:

You Can Read My complete code here.

Answer 1

In your plugin you are just attaching a change event handler on the element which just runs a loop on all the matched set of elements and returns a jQuery object.

If you want to return something from something plugin then the return statement should be outside the event handler.

$.fn.extend({
    something: function(options) {
          return $(this).each(function() {
               //Do processing here
          });
     }
});

Now you can use this

var myarray = $('#selector').something({
        regex:/^([\u0600-\u06FF]|\s)*$/,
        // another options
});
$('#selector').change(function (){
    alert (myarray[0]);
});

Note that myarray will be an array because jQuery each returns a jQuery object which itself is an array of DOM elements.