javascript - 右键单击 JavaScript 在 PHP 中的表上不起作用

Question

嘿，我的 JavaScript 有问题，我将它用于表格的内容。我的功能是为用户提供的，当他们右键单击表格行时会出现一个上下文菜单，他们可以在其中选择他们想要执行的操作。问题是当我转到表格中的下一页时，右键单击不再起作用(我的页面加载了表格中的 10 条记录)。

我的脚本:

    <script type='text/javascript'>
$(window).load(function(){
(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);                        
                        var $selectedFileId = $menu.data("invokedOn").find('.datatable_fixed_column').attr('id');                        
                        settings.menuSelected.call(this, $invokedOn, $selectedMenu, $selectedFileId);
                    });

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

$("#datatable_fixed_column td").contextMenu({
    menuSelector: "#contextMenu",
    menuSelected: function (invokedOn, selectedMenu, id) {
        switch(selectedMenu.text()){
        case 'Modificare':{
            var rand = invokedOn.parent().children();
            var idpost = $(rand[0]).text();
            window.location.href = "organigrama_add.php?control=update&id=" + idpost;       
        }
        break;
        case 'Stergere':{
            var rand = invokedOn.parent().children();
            var marca = $(rand[1]).text();
            if (marca == '0')
            {
                var idpost = $(rand[0]).text();
                var departament = $(rand[5]).text();
                var subdepartament = $(rand[6]).text();
                var schimb = $(rand[9]).text();
                var functie = $(rand[10]).text();       
                var msg = "Sunteti sigur ca doriti sa stergeti aceasta inregistrare?" + "\nDepartament: " + departament + "\nSubdepartament: " + subdepartament + "\nSchimb: " + schimb + "\nFunctie: " + functie;
                var confirmare = confirm(msg);
                if (confirmare == true)
                {
                    window.location.href = "organigrama.php?control=delete&id=" + idpost;
                }
            }  
            else
            {
                var msg = "Nu se poate sterge acest post. Doar posturile libere se pot sterge.";
                alert(msg);
            }        
        }   
        break;  
        case 'Renunta':{
            return false;
        }
        break;
        }
    }
});
});
            </script>

以及用于此的上下文菜单:

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
        <li><a tabindex="-1">Modificare</a></li>
        <li><a tabindex="-1" href="#">Stergere</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="">Renunt</a></li>
    </ul>

编辑:我忘了提到 javascript 在 </body> 之前结束标记和上下文菜单在 <body> 之后开始标记。

Answer 1

所以基本上这里的问题是表中新添加的行不会从页面的初始加载中获得绑定(bind)。所以这里需要的修复是使用这个将事件绑定(bind)到主文档

$(document).on('contextmenu', target, function)

这将允许 jquery 在“右键单击/上下文菜单”事件上对目标元素运行特定功能