diff --git a/README.md b/README.md index e96ae4e..66cfc92 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ Include the files `jquery.contextmenu.css` and `jquery.contextmenu.js` in your p - + ... rest of your stuff ... @@ -63,6 +63,23 @@ You can wire up a context menu like this: {label:'Blah Blah', icon:'icons/book-open-list.png', action:function() { alert('clicked 3') } }, ]}); +If you add elements to your DOM dynamically you can use the liveSelector property in the settings object like this: + +
+
Menu 1
+
No-Menu 2
+
+ + $('#mythingy').contextPopup({ + title: 'My Popup Menu', + liveSelector: '.hasMenu', + items: [ + {label:'Some Item', icon:'icons/shopping-basket.png', action:function() { alert('clicked 1') } }, + {label:'Another Thing', icon:'icons/receipt-text.png', action:function() { alert('clicked 2') } } + ]}); + +If you then add more elements to #mythingy which have a hasMenu class they will react to a rightclick too, while the other elements will not. + Icons ----- diff --git a/demo/example.html b/demo/example.html index 0718a81..f815a94 100644 --- a/demo/example.html +++ b/demo/example.html @@ -1,7 +1,7 @@ - + + + + + + + +
+
Element 1
+
+ + notice that in comparsion to example.html in this demo only the elements in the box have a contextmenu while the box itself has none and
+ the added elements have a context menu without executing contextPopup on every element.
+ right click out of the box to show the standard browser menu (if you're trying to view-source, right click here) + + diff --git a/jquery.contextmenu.css b/jquery.contextmenu.css index 209e54c..43da660 100644 --- a/jquery.contextmenu.css +++ b/jquery.contextmenu.css @@ -32,6 +32,7 @@ } .contextMenuPlugin > li > a img { + border: none; position: absolute; left: 3px; margin-top: -2px; diff --git a/jquery.contextmenu.js b/jquery.contextmenu.js index efe52b5..1ce5529 100644 --- a/jquery.contextmenu.js +++ b/jquery.contextmenu.js @@ -30,7 +30,8 @@ jQuery.fn.contextPopup = function(menuData) { headerClass: 'header', seperatorClass: 'divider', title: '', - items: [] + items: [], + liveSelector: null }; // merge them @@ -43,7 +44,7 @@ jQuery.fn.contextPopup = function(menuData) { if (settings.title) { $('
  • ').text(settings.title).appendTo(menu); } - settings.items.forEach(function(item) { + jQuery.each(settings.items, function(i, item) { if (item) { var rowCode = '
  • '; // if(item.icon) @@ -66,9 +67,8 @@ jQuery.fn.contextPopup = function(menuData) { menu.find('.' + settings.headerClass ).text(settings.title); return menu; } - - // On contextmenu event (right click) - this.bind('contextmenu', function(e) { + + function contextMenuHandler(e) { var menu = createMenu(e) .show(); @@ -104,7 +104,13 @@ jQuery.fn.contextPopup = function(menuData) { // Cancel event, so real browser popup doesn't appear. return false; - }); + } + + if (settings.liveSelector) { + this.on('contextmenu', settings.liveSelector, contextMenuHandler); + } else { + this.on('contextmenu', contextMenuHandler); + } return this; };