Nested DOM Element Context Menus

When nested DOM elements have separate context menus. Activating the inner menu also activates the outer menu

by Nigel Thompson

HTML

<script src="http://wwwendt.de/tech/demo/jquery-contextmenu/jquery.ui-contextmenu.js"></script>
<!-- Create an area to contain our editable components -->
<div class="container" id="container">

    <!-- Add a child which will have a context menu -->
    <div class="outer-child" id="outer-child">
        Outer Child

        <!-- inner child with its own context menu -->
        <div class="inner-child" id="inner-child">
            Inner Child
        </div>
    </div>
</div>

CSS

.outer-child {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background: green;
        }
        .inner-child {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background: yellow;
        }

JavaScript

// create context menu on outer child
    $("#outer-child").contextmenu({
        menu: [
            {title: "This is the Outer Menu", cmd: "outer-menu"}
            ],
        select: function(event, ui) {
            alert("select " + ui.cmd + " on " + ui.target.text());
        }
    });


    // create context menu on inner child
    $('#inner-child').contextmenu({
        menu: [
            {title: "Inner Menu", cmd: "inner-menu"}
            ],
        select: function(event, ui) {
            alert("select " + ui.cmd + " on " + ui.target.text());
        }
    });