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

          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分配不同的回调。

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

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

提前致谢。

Answer 1

在给出的示例中，您将列表cmenu作为同一对象传递给每个cnxtmenu()的调用。由于cmenu是持久性的，当您unbind单击侦听器时，您将删除先前连接的侦听器并将其替换为新的侦听器。

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

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

Answer 2

我遇到了你的问题，你错误地分配了回调。并且回调按照您为最后一个分区指定的方式进行分配。所以你需要在contextmenu函数中分配回调。

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

我的插件不适用于不同的回调

2 个答案: