0

我正在为不同 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);

          var mid = '#'+opt.menuid, seldiv;
          this.live({
               "contextmenu" : function(e) {
                     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(); 
                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
});

//...

$('.fourth').cnxtmenu({menuid:'cmenu',
     // soem differt callbacks.
});

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

我的问题是选择器的回调没有区别，唯一的最后一个，即第四个选择器的回调正在执行。并且多次触发回调。

请帮我看看我的代码有什么问题。

提前致谢。

4

2 回答 2

1

在给出的示例中，您将列表cmenu作为相同的对象传递给每次调用cnxtmenu(). 由于cmenu是持久的，当您unbind单击侦听器时，您将删除以前附加的侦听器并用新的侦听器替换它们。

您需要将不同的上下文菜单传递给每个调用，cnxtmenu()或者您可以尝试重新架构具有多个回调的事物，但根据触发上下文菜单的元素将它们过滤掉。

此外，除非您受限于 jQuery 1.7 以下的某个版本，否则您应该使用on()and off()，而不是live()and unbind()。

于 2012-08-23T06:23:19.563 回答
1

我得到了你的问题，你以错误的方式分配回调。并且回调按照您为最后一个部门指定的分配。因此，您需要在 contextmenu 函数中分配回调。

第二次调用插件的次数，插件代码也将执行，并且作为您的代码，回调也将在 onload 时分配。代码更改后无需担心。

于 2012-08-23T11:59:44.737 回答