Trình đơn ngữ cảnh jQuery - tìm phần tử nào đã kích hoạt nó

Question

Tôi đang cố gắng viết một tùy chọn menu ngữ cảnh cho một trang của tôi. Về cơ bản, một div được nhấp chuột phải, một menu tùy chọn bật lên có thể được sử dụng để thực hiện các tác vụ.

Sự cố của tôi đang cố gắng tìm phần tử gốc đã kích hoạt mọi thứ (tức là div được nhấp chuột phải).

mã jQuery của tôi là nhiều hay ít:

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

- Vì vậy - Tôi có thể xem những gì yếu tố tạo sự kiện khi ban đầu nhấp chuột phải xảy ra. Nhưng không phải khi mục menu được nhấp.

Tôi đang làm việc vấp phải thứ gì đó với nhau bằng cách viết phần tử vào hộp văn bản ẩn khi được nhấp chuột phải, sau đó đọc khi một trong các tùy chọn được nhấp, sau đó xóa nó khi menu đóng. Có vẻ như không phải là cách tiếp cận lý tưởng mặc dù - và tôi cảm thấy như tôi đang thiếu một cái gì đó cơ bản.

Hy vọng bạn sẽ thấy những gì tôi đang cố gắng làm. Tôi có thể đăng một ví dụ hoàn chỉnh hơn theo yêu cầu.

Answer 1

Bạn có thể xem xét sử dụng các phương pháp jQuery data storage.

Trong mã menu ngữ cảnh của bạn, bạn có thể đặt:

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

Sau đó, khi bạn muốn tham khảo các yếu tố đó bắt đầu nhấp chuột, bạn chỉ có thể làm điều này:

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

Và đặt originalElement trong hàm jQuery $() để truy cập vào tính ưu việt của jQuery. Không quan trọng bạn đặt dữ liệu ở đâu, vì bất kỳ phần tử DOM nào cũng có thể có dữ liệu liên quan đến nó. Bạn có thể lưu trữ bất cứ điều gì - trong mã ví dụ trên, tôi lưu trữ HTMLElement nguyên (không phải jQueryified) nhưng bạn cũng có thể lưu trữ nó nếu bạn muốn.

Xem ở đây cho một ví dụ nhỏ: http://www.jsfiddle.net/jonathon/sTJ6M/

Answer 2

tôi thêm một lĩnh vực ẩn và sau đó tìm thấy nó dựa trên nhấp chuột, như thế này:

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

sau đó với JQuery

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

Answer 3

Tôi là một chút muộn để bên đây nhưng tôi phát hiện ra rằng khi các menu ngữ cảnh được tạo ra mặt hàng đó hoạt động được lớp 'menu ngữ cảnh chủ động' thêm cho nó. Điều này chỉ có thể có trong các phiên bản mới hơn. Tôi đang sử dụng menu ngữ cảnh 1.6.6.

Chỉ cần thêm:

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

để xử lý menu ngữ cảnh. Ở đây nó được kết hợp với mã ví dụ.

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