右键单击 JavaScript 不适用于 PHP 中的表



hy,我的javaScript有一个问题,我将其用于表的内容。当用户右键单击表行时,我的功能是给他们的上下文菜单,他们可以在其中选择自己想做的事情。问题是,当我转到表中的下一个页面时,右键单击不再起作用(我的页面加载10个记录中有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>开始标签之前。

基本上的问题是,表中新添加的行不会从页面的初始负载中获得绑定。因此,这里需要的修复是通过使用此

将事件绑定到主文档
$(document).on('contextmenu', target, function)

这将允许jQuery在"右键单击/contextMenu"事件上将特定函数运行到目标元素

最新更新