2012-08-22 52 views
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); 
     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分配不同的回調。

我的問題是回調沒有不同的選擇器。 和回調觸發很多次。

幫我在我的代碼最新錯了請

在此先感謝。

+0

它真的是一個好主意來命名函數參數$ ???? – JohnB

+2

@JohnB他只是將'jQuery'變量作爲'$'傳遞給即將調用的函數表達式,它將設置插件。將在插件執行中傳遞的實際參數將在'options'參數中。這不僅僅是一個好主意,而且是jQuery推薦的一個很好的練習http://docs.jquery.com/Plugins/Authoring – davids

+0

不太瞭解jQuery插件創作,但應該'this.live({'be' $(本).live({'? –

回答

1

您可以在插件中分配腳本的onload時間回調函數,所以只有最後一次分配的回調函數可以工作。

解決方案是你必須在contextmenu函數中指定回調。