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 方法尚未执行，并且您要查找的元素尚未创建。