我的插件不工作的不同回調

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

我得到了你的問題，你以錯誤的方式分配回調。並且回調按照您爲上一次劃分指定的方式進行分配。所以你需要在contextmenu函數內指定回調。

您調用插件的次數是第二次，插件代碼也會執行，並且作爲您的代碼，回調函數也會在onload時進行分配。代碼更改後無需擔心。

Answer 2

在給出的例子中，您將cmenu列表作爲同一對象傳遞給每個cnxtmenu()調用。由於cmenu是持久性的，因此當您點擊偵聽器時，您將刪除以前連接的偵聽器並將其替換爲新的偵聽器。

您可能需要傳遞不同的上下文菜單給每個cnxtmenu()的調用，或者您可以嘗試重新構建具有多個回調的東西，但根據哪個元素觸發了上下文菜單將其過濾掉。

同樣，除非你被限制到下面的jQuery 1.7版本的一些，你應該使用on()和off()，而不是live()和unbind()。