jQuery - Kontext-Menü- element zu finden, was es ausgelöst hat, aus

Bin ich zu schreiben versucht, ein Kontext-Menü-option für eine Seite von mir.
Im Grunde ein div-Element mit der rechten Maustaste geklickt, ein Optionen-Menü erscheint, die verwendet werden können, Aufgaben zu erfüllen.

Mein problem versucht zu finden, das ursprüngliche element, die Auslöser für alles (also das div, das war der rechten Maustaste geklickt haben).

Mein jQuery-code ist mehr oder weniger:

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

--
Also - ich kann sehen, was element erstellt das Ereignis, wenn der erste mit der rechten Maustaste passiert.
Nicht aber, wenn der Menüpunkt angeklickt wird.

Dem ich arbeitete, tastete etwas zusammen schreiben Sie das element aus, um ein verstecktes Textfeld, wenn Sie mit der rechten Maustaste geklickt, dann Lesen Sie es, wenn Sie eine der Optionen angeklickt, dann entfernen Sie es, wenn das Menü geschlossen wird.
Scheint nicht der ideale Ansatz, aber - und ich fühle mich wie ich ' m fehlt etwas grundlegendes.

Hoffe, Sie sehen, was ich versuche zu tun.
Ich kann nach ein vollständigeres Beispiel auf Anfrage.

InformationsquelleAutor jb. | 2010-12-13
  1. 6

    Könnten Sie überlegen, mit Hilfe der jQuery Datenspeicherung Methoden.

    In Ihrem Kontext-Menü-code, den Sie setzen können:

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

    Dann, wenn Sie wollen, um das element zu referenzieren, die initiiert klicken, können Sie genau dies tun:

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

    Und setzen originalElement in der jQuery-Funktion $() Zugriff auf die jQuery-Güte. Es spielt keine Rolle, wo Sie die Daten, da alle DOM-element kann Daten zugeordnet sein. Sie speichern können, alles - im Beispiel-code oben, ich Speichere die HTMLElement raw (nicht jQueryified), aber Sie können speichern das auch, wenn Sie wollen.

    Sehen Sie hier ein kleines Beispiel: http://www.jsfiddle.net/jonathon/sTJ6M/

    • Zwei Bemerkungen: 1. Sie sind mit dem Selektor-engine zu finden, die #contextMenu-element mehrere Male. Würde es sinnvoll sein, cache, jQuery-Objekt: var $contextMenu = $("#contextMenu"); 2. Es könnte eine gute Idee sein, zum Schutz gegen originalElement wird nicht definiert, in welchem Fall originalElement.id würde einen Fehler auslösen.
    • Cheers Šime. Ich Stimme mit Ihren Punkten, aber ich war nicht allzu besorgt mit dem refactoring. Ich war gerade Nuten in den OP-code und macht es klar, wie die data-Methoden. In diesem Fall, eher als cache-Objekt, Sie können nur profitieren von der Verkettung und nicht erfordern den zusätzlichen Variablen 🙂
    • Danke Jonathon, das ist genau das, was ich brauchte!
    InformationsquelleAutor Jonathon Bolster
  2. 2

    Ich ein hidden-Feld, und dann finden Sie es auf der Grundlage der klicken Sie auf, wie diese:

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

    dann mit JQuery

    $('#ctxDelete').click(function () {
    var id = $(this).closest('.myItem').find('.myID').val();   
    alert('delete was clicked, by element with ID = ' + id);
});
    • Vielleicht möchten Sie sich bei der Daten-Lagerung-Methoden, - es spart zu erstellen hidden-input-Typ für Dinge wie diese (und ermöglicht die Speicherung beliebiger Objekte, nicht nur strings): api.jquery.com/category/miscellaneous/data-storage
    • sieht cool aus, aber das problem ist.. es wird ausgelöst, wenn ein Links-Klick ausgeführt wird.. +1 aber 🙂
    • das ist der Punkt, nicht wahr?
    InformationsquelleAutor Jason
  3. 2

    Ich bin ein wenig spät zur party hier, aber ich fand, dass, wenn das Kontext-Menü generiert wird, das aktive Element bekommt die Kontext-menu-active " - Klasse Hinzugefügt. Dies kann nur in neueren Versionen. Ich bin über Kontext-Menü 1.6.6.

    Einfach hinzufügen:

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

    dem Kontext-Menü-handler. Hier ist es in Kombination mit den Beispiel-code.

    $(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);
    })
});
    InformationsquelleAutor NAZ
Schreibe einen Kommentar