Контекстное меню jQuery - поиск того, какой элемент вызвал его

Question

Я пытаюсь написать опцию контекстного меню для моей страницы.В основном, по div щелкают правой кнопкой мыши, появляется меню опций, которое можно использовать для выполнения задач.

Моя проблема - попытаться найти оригинальный элемент, который запустил все (т.е. div, по которому щелкнули правой кнопкой мыши).

Мой код jQuery больше или меньше:

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

- Итак, я вижу, какой элемент создал событие, когда происходит первоначальный щелчок правой кнопкой мыши.Но не тогда, когда по пункту меню щелкают.

Я работал над тем, чтобы что-то набросать, выписав элемент в скрытое текстовое поле при щелчке правой кнопкой мыши, затем прочитав его, когда щелкнул один из параметров, затемудаляя его, когда меню закрывается.Хотя это не похоже на идеальный подход - и я чувствую, что мне не хватает чего-то простого.

Надеюсь, вы понимаете, что я пытаюсь сделать.Я могу опубликовать более полный пример по запросу.

Answer 1

Вы можете использовать методы хранения данных jQuery .

В коде контекстного меню вы можете указать:

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

Затем, когда вы захотите сослатьсяЭлемент, который инициировал щелчок, вы можете просто сделать это:

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

И поместить originalElement в функцию jQuery $(), чтобы получить доступ к совершенству jQuery.Неважно, куда вы помещаете данные, так как с любым элементом DOM могут быть связаны данные.Вы можете хранить все что угодно - в приведенном выше примере я храню HTMLElement raw (не jQueryified), но вы можете сохранить и его, если хотите.

См. Здесь небольшой пример: http://www.jsfiddle.net/jonathon/sTJ6M/

Answer 2

Я немного опоздал на вечеринку, но обнаружил, что при создании контекстного меню активный элемент получает добавленный класс context-menu-active Это может быть только в более свежих версиях. Я использую контекстное меню 1.6.6.

Просто добавьте:

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

к обработчику контекстного меню. Здесь это сочетается с примером кода.

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

Answer 3

Я добавляю скрытое поле и затем нахожу его по щелчку, например:

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

, затем с помощью JQuery

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