javascript - 阻止链接执行其 href 路径

Question

您好，我正在尝试阻止链接执行其默认操作，但我似乎没有运气。这是我的代码:

 $("a.delete").on("click", function (e) {
    var container = $("#lightbox-background");
    var lightbox = $("#lightbox");

    lightbox.init("Are you sure you want to delete this book?")
    e.preventDefault();       
});
var lightbox = {
    init : function(actionString){
        $("<div id='lightbox-background'></div>").appendTo("body");
        $("<div id='lightbox'></div>").appendTo("body");
        $("<p></p>").appendTo("#lightbox");
        $("<a href='#' id='ok'>OK</a>").appendTo("#lightbox");
        $("<a href='#' id='cancel'>Cancel</a>").appendTo("#lightbox");
    }
}

我希望如果我使用 e.preventDefault 它会阻止链接转到它的 href 路径，但它不起作用。我做错了什么吗？

编辑:我刚刚注意到，如果我从点击事件处理程序中删除对灯箱对象的调用，e.preventDefault() 就会起作用。

Answer 1

您的问题在这一行:

var lightbox = $("#lightbox"); 

在onclick回调函数中隐藏变量名称与在单击回调外部定义的全局灯箱对象的名称相同。上面提到的局部变量只是覆盖该函数范围内的全局变量。基本上，您正在调用 $("#lightbox") 的 init:

$("#lightbox").init("....")

不确定你在做什么，但尝试像这样更新你的代码:

$("a.delete").on("click", function (e) {
    var container = $("#lightbox-background");
    var lightboxElement = $("#lightbox");

    lightbox.init("Are you sure you want to delete this book?")
    e.preventDefault();       
});

此外，调用

var container = $("#lightbox-background");
var lightboxElement = $("#lightbox");

第一次，您将得到一组空元素，因为此时 init 方法尚未执行，并且您要查找的元素尚未创建。