Menu kontekstowe jQuery - znajdowanie elementu, który go wyzwoliło

Question

Próbuję napisać opcję menu kontekstowego dla strony mojej. Zasadniczo kliknij prawym przyciskiem myszy, pojawi się menu opcji, które można wykorzystać do wykonywania zadań.

Mój problem polega na znalezieniu oryginalnego elementu, który uruchomił wszystko (tj. Element div, który został kliknięty prawym przyciskiem myszy).

Mój kod jQuery jest bardziej lub mniej:

//this is what displays the context menu 
$('.outfeedPosition').bind("contextmenu", function (e) { 
    $('#contextMenu').css({ 
     top: e.pageY + 'px', 
     left: e.pageX + 'px' 
    }).show(); 

    //'this' is the element which was clicked by the user. 
    alert($(this).attr('id')); 

    return false; 
}); 



//this is the contextMenu's button handler. 
$('#ctxDelete').click(function() { 
    alert('delete was clicked, but i dont know by which element - so I dont know which one to delete'); 
}); 


<div id="contextMenu"> 
    <ul> 
     <li><a id="ctxInsert" href="#">Insert</a></li> 
     <li><a id="ctxEdit" href="#">Edit</a></li> 
     <li><a id="ctxDelete" href="#">Delete</a></li> 
    </ul> 
</div> 

- Więc - Widzę co elementem stworzony przypadku, gdy początkowa prawym przyciskiem dzieje. Ale nie po kliknięciu elementu menu.

Pracowałem nad zbieraniem czegoś razem, wypisując element do ukrytego pola tekstowego, gdy jest klikany prawym przyciskiem myszy, a następnie czytając go po kliknięciu jednej z opcji, a następnie usuwając go po zamknięciu menu. Nie wydaje się jednak idealnym podejściem - i czuję, że brakuje mi czegoś podstawowego.

Mam nadzieję, że widzisz, co próbuję zrobić. Mogę wysłać bardziej kompletny przykład na życzenie.

Answer 1

Można rozważyć zastosowanie metod jQuery data storage.

W context kodu menu można umieścić:

$('.outfeedPosition').bind("contextmenu", function (e) { 
    $('#contextMenu').css({ 
     top: e.pageY + 'px', 
     left: e.pageX + 'px' 
    }).show(); 

    //Store the item that was clicked 
    $("#contextMenu").data('originalElement', this); 

    return false; 
}); 

Wtedy, gdy chcemy odwołać się do elementu, który zainicjował kliknięcie, można po prostu to zrobić:

$('#ctxDelete').click(function() { 
    var originalElement = $("#contextMenu").data('originalElement'); 
    alert('delete was clicked by ' + originalElement.id); 
}); 

I umieścić originalElement w funkcja jQuery $(), aby uzyskać dostęp do dobroci jQuery. Nie ma znaczenia, gdzie umieścisz dane, ponieważ każdy element DOM może mieć powiązane z nim dane. Możesz przechowywać wszystko - w powyższym kodzie przykładowym przechowuję surowy kod HTMLElement (nie jQueryified), ale możesz go również zachować, jeśli chcesz.

Zobacz tutaj na mały przykład: http://www.jsfiddle.net/jonathon/sTJ6M/

Answer 2

dodać ukryte pole, a następnie znaleźć go w oparciu o kliknięcia, podobnie jak to:

<div class="myItem"> 
    <div id="contextMenu"> 
     <ul> 
      <li><a id="ctxInsert" href="#">Insert</a></li> 
      <li><a id="ctxEdit" href="#">Edit</a></li> 
      <li><a id="ctxDelete" href="#">Delete</a></li> 
     </ul> 
    </div> 
    <input type="hidden" class="myID" value="1"> 
</div> 

następnie z JQuery

$('#ctxDelete').click(function() { 
    var id = $(this).closest('.myItem').find('.myID').val(); 
    alert('delete was clicked, by element with ID = ' + id); 
}); 

Answer 3

Jestem trochę późno na imprezę tutaj, ale okazało się, że gdy menu kontekstowego generowany jest aktywny element pobiera klasę "Menu kontekstowe czynne dodał do tego. Może to być tylko w nowszych wersjach. Używam menu kontekstowego 1.6.6.

Wystarczy dodać:

var originalElement = $('.context-menu-active'); 

do obsługi menu kontekstowego. Tutaj jest połączony z przykładowym kodem.

$(function(e){ 
    $.contextMenu({ 
     selector: '.context-menu-one', 
     callback: function(key, options) { 
      var originalElement = $('.context-menu-active'); 
      var m = "clicked: " + originalElement[0].innerHTML; 
      window.console && console.log(m); 
     }, 
     items: { 
      "edit": {name: "Edit"}, 
      "cut": {name: "Cut"}, 
      "copy": {name: "Copy"}, 
      "paste": {name: "Paste"}, 
      "delete": {name: "Delete"}, 
      "sep1": "---------", 
      "quit": {name: "Quit"} 
     } 
    }); 

    $('.context-menu-one').on('click', function(e){ 
     console.log('clicked', this); 
    }) 
});