javascript 当页面上有其他自定义js时,表头部分随机的Jquery代码不起作用

ewm0tg9j  于 2023-01-11  发布在  Java
关注(0)|答案(1)|浏览(77)

所以我有一个加载表头的局部视图。表头里面有标题和3个动态显示的按钮之一,当点击时会打开一个包含额外按钮的小div。这个jquery代码在没有自定义javascript/jquery的页面上工作得很好。在有自定义代码的页面上,它们也能正确工作4/5次。

*使用最新的jquery进行了更新

$(document).ready(function() {
    // Use event delegation to handle clicks on the additional buttons
    $(document).on("click", "#@additionalButtonID, #@additionalButtonID2, #@additionalButtonID3", function(e) {
        e.stopPropagation(); // prevent the event from propagating up to the document element
        const div = $("div#div-@Model.UniqueTableIdentifier");
        div.css("left", e.clientX -150);
        div.css("top", e.clientY);
        div.fadeIn(200);
    });

    // Use event delegation to handle clicks on the buttons inside the div
    $(document).on("click", "div#div-@Model.UniqueTableIdentifier button", function(e) {
        e.stopPropagation(); // prevent the event from propagating up to the document element
        const div = $("div#div-@Model.UniqueTableIdentifier");
        div.fadeOut(200);
    });

    // Use event delegation to handle clicks on the li element
    $(document).on("click", ".list-tbl-items", function(e) {
       
 if ((e.target).querySelector('button') != null) {
        (e.target).querySelector('button').click();
        e.stopPropagation();
    }
});

// Use event delegation to handle clicks on the document, outside of the div
$(document).on("click", function(e) {
    if (!$(e.target).closest("div#div-@Model.UniqueTableIdentifier").length) {
        const div = $("div#div-@Model.UniqueTableIdentifier");
        div.fadeOut(200);
    }
});
});

你看,我甚至有事件委托去做的文件点击,我认为这将只是使它的标题表在最坏的情况下,但仍然做这些问题。最坏的是,我可以刷新页面多次之前,它再次发生。

b4lqfgs4

b4lqfgs41#

可能是jQuery脚本在您开始使用时尚未加载。您应该在页面加载后附加所有事件。使用JQuery:

$( document ).ready( function(){
  // here your code...
})

或者使用纯JavaScript

window.addEventListener ('load',()=>{
  // here your code...
} );

相关问题