0

嗨，我试图阻止链接执行它的默认操作，但我似乎没有运气。这是我的代码：

 $("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() 有效。

4

4 回答 4

2

您的问题出在这一行：

var lightbox = $("#lightbox");

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

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

于 2013-03-11T12:00:49.907 回答
0

试试看是否有效

$("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();   
    return false;    
});
于 2013-03-11T11:48:43.380 回答
0

您是否在声明的变量之上尝试过它：

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

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

刚刚注意到您';'在这里错过了关闭：

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");
  }
}; //<----this one
于 2013-03-11T11:50:30.003 回答
0

如下链接示例：

<a href="google.com"> google </a>

将 javascript 与 jQuery 一起使用

$("a").click(function(e){e.preventDefault(); return false;});

这不会重定向页面上的任何链接:)

或者在特定情况下它会像

$("a.delete").click(function(e){e.preventDefault(); return false;});

注意：添加e.preventDefault();以防止事件触发。

于 2013-03-11T12:02:23.663 回答