javascript - 上下文菜单 - InvokedOn 文本未被克隆

Question

这是我的 fiddle - http://jsfiddle.net/X9tgY/1526/

该行代码不起作用

$(selectedText).clone().insertAfter(selectedText);

您可以通过右键单击 html 文本进行测试，我得到了 invokedOn 文本的 html，但我无法克隆它。

(function ($, window) {

    $.fn.contextMenu = function (settings) {

        return this.each(function () {

            // Open context menu
            $(this).on("contextmenu", function (e) {
                // return native menu if pressing control
                if (e.ctrlKey) return;
                
                //open menu
                var $menu = $(settings.menuSelector)
                    .data("invokedOn", $(e.target))
                    .show()
                    .css({
                        position: "absolute",
                        left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                        top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                    })
                    .off('click')
                    .on('click', 'a', function (e) {
                        $menu.hide();
                
                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);
                        
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                    });
                
                return false;
            });

            //make sure menu closes on any click
            $('body').click(function () {
                $(settings.menuSelector).hide();
            });
        });
        
        function getMenuPosition(mouse, direction, scrollDir) {
            var win = $(window)[direction](),
                scroll = $(window)[scrollDir](),
                menu = $(settings.menuSelector)[direction](),
                position = mouse + scroll;
                        
            // opening menu would pass the side of the page
            if (mouse + menu > win && menu < mouse) 
                position -= menu;
            
            return position;
        }    

    };
})(jQuery, window);




$("#container").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu) {
		
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
			var itsId = $(invokedOn).attr('id');
			var selectedText = $(invokedOn).get(0).outerHTML;
			var parentDiv = $(invokedOn).parent();
        alert(selectedText);
		if (selectedMenu = "Clone"){
			alert("inside");
			$(selectedText).clone().insertAfter(selectedText);
		}
    }
});

@import url(http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="container">
<div id="content">content</div>
    <div id="content2">
	<p>This is p </p>
	<h3> This is h3 </h3>
	</div>
    <button id="button">show it</button>
</div>

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Clone</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/18666601/1366033'>Use Bootstrap 3 dropdown menu as context menu</a><br/>
<div>

Answer 1

首先，selectedMenu = "Clone" 没有比较任何内容。它将单词Clone分配给selectedMenu变量。

您应该使用 == 并且由于 selectedMenu 是一个 jQuery 对象，您应该再次检查其文本。所以

 if (selectedMenu.text() == "Clone")

现在，selectedText 还保存使用 $(invokedOn).get(0).outerHTML 提取的 HTML 字符串

因此您很可能想要克隆该元素并将其插入到其自身之后。

$(invokedOn).clone().insertAfter(invokedOn);

(所以你实际上根本不需要提取 html)

(function ($, window) {

    $.fn.contextMenu = function (settings) {

        return this.each(function () {

            // Open context menu
            $(this).on("contextmenu", function (e) {
                // return native menu if pressing control
                if (e.ctrlKey) return;
                
                //open menu
                var $menu = $(settings.menuSelector)
                    .data("invokedOn", $(e.target))
                    .show()
                    .css({
                        position: "absolute",
                        left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
                        top: getMenuPosition(e.clientY, 'height', 'scrollTop')
                    })
                    .off('click')
                    .on('click', 'a', function (e) {
                        $menu.hide();
                
                        var $invokedOn = $menu.data("invokedOn");
                        var $selectedMenu = $(e.target);
                        
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu);
                    });
                
                return false;
            });

            //make sure menu closes on any click
            $('body').click(function () {
                $(settings.menuSelector).hide();
            });
        });
        
        function getMenuPosition(mouse, direction, scrollDir) {
            var win = $(window)[direction](),
                scroll = $(window)[scrollDir](),
                menu = $(settings.menuSelector)[direction](),
                position = mouse + scroll;
                        
            // opening menu would pass the side of the page
            if (mouse + menu > win && menu < mouse) 
                position -= menu;
            
            return position;
        }    

    };
})(jQuery, window);




$("#container").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu) {
		
        var msg = "You selected the menu item '" + selectedMenu.text() +
            "' on the value '" + invokedOn.text() + "'";
			var itsId = $(invokedOn).attr('id');
			var selectedText = $(invokedOn).get(0).outerHTML;
			var parentDiv = $(invokedOn).parent();
        alert(selectedText);
		if (selectedMenu.text() == "Clone"){
			alert("inside");
			$(invokedOn).clone().insertAfter(invokedOn);
		}
    }
});

@import url(http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div id="container">
<div id="content">content</div>
    <div id="content2">
	<p>This is p </p>
	<h3> This is h3 </h3>
	</div>
    <button id="button">show it</button>
</div>

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
    <li><a tabindex="-1" href="#">Clone</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/18666601/1366033'>Use Bootstrap 3 dropdown menu as context menu</a><br/>
<div>

修复了演示:http://jsfiddle.net/X9tgY/1527/