Context menu not working for new content

Question

I have context menu and it is working as I want but once I use ajax to get more content to the page the context menu is not working in the new content !

This is my JavaScript:

$(".image").contextMenu({
     menu: 'myMenu'
  }, function(action, el, pos) {
     if (action == "test1") {
            // function
     } else if (action == "test1") {
            // function
     } else if (action >= 0 ) {         
            // function
     } else if (action == "test3") {
            // function
     } else {
            // function
     }
});

HTML

 <div class="old-real-content">
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
</div>

After the page loads I use ajax to append new data :

<div class="new-apeneded-data">
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
</div>

Why does the context menu only work "old-real-content" only ? How can I make it work also after appending "new-apeneded-data" ?

Please have a look at the following link, might help you...http://stackoverflow.com/questions/12938805/enabling-jquery-contextmenu-item-on-ajax-request — R4nc1d, Apr 12 '15 at 21:22

score 1 · Answer 1 · answered Apr 12 '15 at 21:20

Jquery Contextmenu plugin has no need re-initializing on new added elements if they have same class used in function definition. In your case following code will work on all elements by class="image". find More details here

$(function(){
    $.contextMenu({
        selector: '.image', 
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m); 
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: "quit"}
            // and other menus
        }
    });
});

they have the same class but not working that is the problem :/ — Madian Malfi, Apr 12 '15 at 21:30
How if you call this function again after successful ajax call? — Ali Sheikhpour, Apr 13 '15 at 05:51

Maxim Mazurok · Answer 2 · 2015-04-12T22:09:41.727

0

It is because when you write $(".image").contextMenu(), it means, that you are bind new event to existing .image on the page. When you crate/load more elements, you should apply $(".image_new").contextMenu() to them.

One of solutions is to attach event listeners to your images like so: $(".image").off("contextMenu").on('contextMenu', function() {}); It means, that first, you bind off contextMenu event from all images and then you bind contextMenu event to all images. You shoul run this code when new images loaded.

Does it makes sense?

UPDATE: That is exactly what you want, i think:

$(document).contextmenu({
    delegate: ".image",
    //menu: "myMenu",
    menu: [
        {title: "Cut <kbd>Ctrl+X</kbd>", cmd: "cut", uiIcon: "ui-icon-scissors"},
        {title: "Copy <kbd>Ctrl+C</kbd>", cmd: "copy", uiIcon: "ui-icon-copy"}
    ],
    select: function(event, ui) {
        switch(ui.cmd){
        case "copy":
            alert('copy');
            break
        case "cut":
            alert('cut');
            break
        }
    }
});

edited Apr 12 '15 at 22:09

answered Apr 12 '15 at 21:17

Maxim Mazurok

3,856
2
22
37

i did try that but i couldn't make it work , how can i put this "contextMenu({ menu: 'myMenu' }, function(" inside on() – Madian Malfi Apr 12 '15 at 21:29
@MadianMalfi, better checkout Ali Sheikhpour's answer. It is much better than mine. – Maxim Mazurok Apr 12 '15 at 21:30
i tried but not working ! .. thats why i am here in the 1st place :( – Madian Malfi Apr 12 '15 at 21:38
@MadianMalfi wait a min, I will make a try to help you – Maxim Mazurok Apr 12 '15 at 21:39
@MadianMalfi watch an upfate in my answer, I think now it fully answers your question. – Maxim Mazurok Apr 12 '15 at 22:10

score 0 · Answer 3 · answered Apr 12 '15 at 21:26

should work if you use on function:

$('body').on('mouseover', ".image", function(e)  { 
 e.preventDefault();
 //Add your custom function for context menu here!
 contextMenu();
}

all class="image" elements added to the body should be affected by the event, even if they are added after page was fully loaded.

Context menu not working for new content

3 Answers3