Контекстное меню не работает для нового содержимого

Question

У меня есть контекстное меню, и он работает так, как я хочу, но как только я использую ajax для получения большего контента на странице, контекстное меню не работает в новом контенте!

Это мой 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> 

После загрузки страницы я использую Ajax для добавления новых данных:

<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> 

Почему контекстное меню только работа «старое-реальное содержание»? Как я могу заставить его работать и после добавления «новых apeneded-data»?

Answer 1

Это происходит потому, что когда вы пишете $(".image").contextMenu(), это означает, что вы связать новое событие существующих.image на этой странице. Когда вы храните/загружаете больше элементов, вы должны применить к ним $(".image_new").contextMenu().

Одно из решений состоит в закрепление слушателей событий к вашим изображениям следующим образом: $(".image").off("contextMenu").on('contextMenu', function() {}); Это означает, что первый, вы связываете от Контекстного события из всех изображений, а затем вы свяжете Контекстное событие ко всем изображениям. Вы запускаете этот код при загрузке новых изображений.

Имеет ли смысл?

UPDATE: Это именно то, что вы хотите, я думаю:

$(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 
     } 
    } 
}); 

Answer 2

Jquery Контекстное плагин не имеет никакой необходимости повторной инициализации новых добавленных элементов, если они имеют тот же класс используется в определении функции. В вашем случае следующий код будет работать со всеми элементами по классу = «образ». найти Подробнее 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 
     } 
    }); 
}); 

Answer 3

должен работать, если вы используете на функции:

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

все класс = элементы «изображение» добавлен к телу должны быть затронуты событиями, даже если они будут добавлены после того, как страница была полностью загружена.