jQuery插件：第二個div中的上下文菜單不工作

Question

我開發了一個簡單的jQuery插件，當我右鍵單擊div時工作正常，但是當我單擊第二個div時，上下文菜單出現在第一個div上。 Here's the jsfiddle。這個插件有什麼問題？

插件代碼：

(function ($) { 

var menu = null; 

$.fn.ctxMenu = function(options) { 

    var settings = $.extend({ 
     menuItems: null, 
     onclick: null 
    }, options); 

    show(this,settings.menuItems,settings.onclick); 

}; 


function show(obj,menuItems,onclick){ 

    obj.bind("contextmenu", function(e) { 
     if (e.preventDefault) e.preventDefault(); 
     if (e.stopPropagation) e.stopPropagation(); 
     render(obj,e.offsetX, e.offsetY,menuItems,onclick); 
    }); 

    obj.bind("click", function(e) { 
     if (menu != null) 
     menu.remove(); 
    }); 
} 


function render(obj,x,y,menuItems,onclick) { 

    if (menu != null) 
     menu.remove(); 

    menu = $('<div id="menu" class="ctxMenu" />'); 
    obj.append(menu); 
    menu.css('padding-top', '4px'); 
    menu.css('padding-bottom', '0px'); 
    menu.css('padding-left', '6px'); 
    menu.css('padding-right', '20px'); 
    menu.css('position', 'absolute'); 
    menu.css('top', y+'px'); 
    menu.css('left', x+'px'); 

    for (var i=0;i<menuItems.length;i++) { 

     var item = $('<div id="item" style="height:20px;padding:2px;cursor:default;" />'); 
     item.attr('opt',menuItems[i].opt); 
     var p = $('<p id="p' + i + '" style="margin:0" />'); 
     p.text(menuItems[i].optCaption); 
     p.attr('opt',menuItems[i].opt); 
     item.append(p); 
     menu.append(item); 
     item.bind("click", function(e) { 
      if (typeof onclick == 'function') 
       onclick.call(this,obj.attr('id'),$(e.target).attr('opt')); 
     }); 
    } 
} 

}(jQuery)); 

並品嚐如何調用它的代碼：

 $div.ctxMenu({ 
      menuItems: [ { opt:1, optCaption: "Option 1" }, 
         { opt:2, optCaption: "Option 2" }, 
         { opt:3, optCaption: "Option 3" } 
         ], 
      change: function(id,opt) { 
       alert(id+"-"+opt); 
      } 
     }); 

Answer 1

這是問題所在，父DIV沒有相對定位。它父母需要有相對定位，而菜單div有絕對的位置，以獲得你想要的東西。

方案1（開始於你的代碼的開頭）：

$(document).ready(function() { 

    $container = $('#container'); 

    var $div = $('<div style="width:300px;height:300px;border:1px solid black;float:left; position:relative"/>'); 
    $div.appendTo($container); 
    addCtxMenu($div); 

    var $div2 = $('<div style="width:300px;height:300px;border:1px solid black;float:left; position:relative"/>'); 
    $div2.appendTo($container); 
    addCtxMenu($div2); 

}); 
//... Rest of code 

FIDDLE

方案2（開始於你的代碼的第59行）

我改變菜單div的位置爲position:relative，但這不太優雅，因爲菜單佔用了其父項的寬度。如果您不知道菜單的確切寬度，我會推薦解決方案1。

function render(obj,x,y,menuItems,onclick) { 

     if (menu != null) 
      menu.remove(); 

     menu = $('<div id="menu" class="ctxMenu" />'); 
     obj.append(menu); 
     menu.css('padding-top', '4px'); 
     menu.css('padding-bottom', '0px'); 
     menu.css('padding-left', '6px'); 
     menu.css('padding-right', '20px'); 
     menu.css('position', 'relative'); 
     menu.css('top', y+'px'); 
     menu.css('left', x+'px'); 

     for (var i=0;i<menuItems.length;i++) { 

      var item = $('<div id="item" style="height:20px;padding:2px;cursor:default;" />'); 
      item.attr('opt',menuItems[i].opt); 
      var p = $('<p id="p' + i + '" style="margin:0" />'); 
      p.text(menuItems[i].optCaption); 
      p.attr('opt',menuItems[i].opt); 
      item.append(p); 
      menu.append(item); 
      item.bind("click", function(e) { 
       if (typeof onclick == 'function') 
        onclick.call(this,obj.attr('id'),$(e.target).attr('opt')); 
      }); 
     } 
    } 

FIDDLE

祝你的插件！