Question

I was developed a plugin for context menu of different div

<div>
  <div class='first'>some data</div>
  <div class='second'>some data</div>
  <div class='third'>some data</div>
  <div class='fourth'>some data</div>
</div>

and menu to display as context menu

<ul id='cmenu'>
 <li id='menuItem1'>Item1</li>
<li id='menuItem2'>Item1</li>
<li id='menuItem3'>Item1</li>
<li id='menuItem4'>Item1</li>
<li id='menuItem5'>Item1</li>
<li id='menuItem6'>Item1</li>
</ul>

and my plugin is.

How this plugin works is change the list of menuitems for every division and as the callbacks for menu Items are also change.

(function($) {
    $.fn.cnxtmenu = function(options) {
        var defaults = {
            'menuid' : '',
            item1 : function() {
            },
            item2 : function() {
            },
            item3 : function() {
            },
            item4 : function() {
            },
            item5 : function() {
            },
            item6 : function() {
            },
        }, opt = $.extend({}, defaults, options);
        console.log(opt);
        var mid = '#'+opt.menuid, seldiv;
        this.live({
            "contextmenu" : function(e) {
                //console.log(this);
                seldiv = $(this);
                if ($(this).hasClass('first')) {

                    //change the menu list

                } else if($(this).hasClass('second')){


                // change the menu list to display different items 

                } 
                else if($(this).hasClass('file-list')){
                //differ list

                }
                else if($(this).hasClass('dstore_file-list')){
                    //differ menu list
                }

                $(mid).css({
                    top : e.pageY + 'px',
                    left : e.pageX + 'px'
                }).show();
                return false;
            }
        });

        $(mid).children('li').unbind('click').click(function(e) {
            e.stopPropagation();
            e.preventDefault();
            //console.log(file + "at switch");
            switch(this.id) {
                case 'menuItem1':
                    opt.item1(this, seldiv);
                    break;
                case 'menuItem2':
                    opt.item2(this, seldiv);
                    break;
case 'menuItem3':
                    opt.item3(this, seldiv);
                    break;
case 'menuItem4':
                    opt.item4(this, seldiv);
                    break;
case 'menuItem5':
                    opt.item5(this, seldiv);
                    break;
case 'menuItem6':
                    opt.item6(this, seldiv);
                    break;


            }
            $(mid).hide();
            return false;
        });

        $(mid).click(function() {
            $(mid).hide();
        });
        $(document).click(function() {
            $(mid).hide();
        });

    }
})(jQuery);

and I am using this plugin like this.

$('.first').cnxtmenu({menuid:'cmenu',
item1:some callbacks
...});

for all the three div assign different callbacks.

my problem is callbacks are not differing for the selectors.
and callbacks are triggering many times.

help me whats wrong in my code please

thanks in advance.

Answer 1

You assigning callbacks onload time of script in your plugin, so the only last assigned callbacks will work.

The solution is you have to assign the callbacks inside the contextmenu function.