Question

我开发了一个不同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>

和菜单显示为上下文菜单

<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>

我的插件是。

此插件的工作原理是更改每个分区的菜单项列表，并且菜单项的回调也会更改。

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

我正在使用这个插件。

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

为所有三个div分配不同的回调。

我的问题是选择器的回调没有区别。和回调多次触发。

请帮我解决我的代码中的错误

提前感谢。

Answer 1

您在插件中分配脚本的回调onload时间，因此唯一最后分配的回调将起作用。

解决方案是你必须在contextmenu函数中分配回调。

我的插件回调不起作用

1 个答案: