jQuery menu contextuel - trouver quel élément a déclenché hors

Je suis en train d'écrire un menu contextuel l'option pour une page de la mine.
Fondamentalement, un div est cliqué avec le bouton droit, un menu d'options apparaît, qui peut être utilisé pour effectuer des tâches.

Mon problème est d'essayer de trouver l'origine de l'élément qui a déclenché tout (c'est à dire la div qui a été cliqué avec le bouton droit).

Mon code jQuery est plus ou moins:

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

--
Donc, je peux voir ce que l'élément créé l'événement lors de la première cliquez-droit qui se passe.
Mais pas lorsque l'élément de menu est cliqué.

Je travaillais sur tâtonner quelque chose ensemble, en écrivant l'élément d'une zone de texte caché, lorsqu'il est cliqué avec le bouton droit, puis la lecture lorsque l'une des options est cliqué, puis de l'enlever lorsque le menu se ferme.
Ne semble pas être l'approche idéale si - et j'ai l'impression que je suis absent quelque chose de fondamental.

Espère que vous voyez ce que je suis en train de faire.
Je peux poster un exemple plus complet sur demande.

OriginalL'auteur jb. | 2010-12-13

  1. 6

    Vous pourriez envisager d'utiliser le jQuery le stockage de données méthodes.

    Dans votre menu contextuel de code que vous pouvez mettre:

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

    Puis quand vous le souhaitez pour référence l'élément qui a initié le clic, il vous suffit de faire ceci:

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

    Et mettre originalElement dans la fonction jQuery $() pour accéder à la jQuery bonté. Il n'importe pas où vous mettez les données, puisque tout élément du DOM peut avoir des données qui y sont associées. Vous pouvez stocker tout ce que - dans l'exemple de code ci-dessus, je stocke les HTMLElement raw (pas jQueryified) mais vous pouvez la stocker si vous le souhaitez.

    Voir ici pour un petit exemple: http://www.jsfiddle.net/jonathon/sTJ6M/

    Deux remarques: 1. Vous êtes à l'aide du sélecteur moteur pour trouver la #contextMenu élément plusieurs fois. Il serait raisonnable de cache que l'objet jQuery: var $contextMenu = $("#contextMenu"); 2. Il pourrait être une bonne idée pour se prémunir contre originalElement être défini, auquel cas originalElement.id jeter une erreur.
    Cheers Šime. Je suis d'accord avec vos points, mais je n'étais pas trop préoccupé par le refactoring. Je viens de tomber dans l'OP du code et de le rendre clair comment utiliser les méthodes de données. Dans ce cas, plutôt que de cacher l'objet, vous pouvez simplement profiter de chaînage et de ne pas exiger la variable supplémentaire 🙂
    Merci Jonathan, c'est juste ce dont j'avais besoin!

    OriginalL'auteur Jonathon Bolster

  2. 2

    - Je ajouter un champ caché et ensuite trouver d'après le clic, comme ceci:

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

    puis avec JQuery

    $('#ctxDelete').click(function () {
    var id = $(this).closest('.myItem').find('.myID').val();   
    alert('delete was clicked, by element with ID = ' + id);
});
    Vous voudrez peut-être consulter les méthodes de stockage de données - il évite d'avoir à créer hidden input type pour ce genre de choses (et vous permet d'enregistrer n'importe quel objet, et pas seulement des chaînes de caractères): api.jquery.com/category/miscellaneous/data-storage
    a l'air cool, mais le problème est.. il se déclenche lorsqu'un clic est effectué.. +1 bien 🙂
    c'est le point n'est-il pas?

    OriginalL'auteur Jason

  3. 2

    Je suis un peu en retard à la fête ici, mais j'ai trouvé que lorsque le contexte le menu est généré l'élément actif devient le "context-menu-active" class ajouté. Ce ne peut être dans les versions plus récentes. Je suis en utilisant le menu contextuel 1.6.6.

    Simplement d'ajouter:

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

    dans le menu contextuel du gestionnaire. Ici il est combiné avec l'exemple de 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);
    })
});

    OriginalL'auteur NAZ