Question

Hy，我的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

所以基本上这里的问题是表中新添加的行不会从页面的初始加载中获取绑定。所以这里需要的修复是使用这个

将事件绑定到主文档

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

这将允许jquery在“右键单击/上下文菜单”事件中将特定函数运行到目标元素

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

1 个答案: