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路径，但它不起作用。我做错了什么？

编辑：我刚注意到，如果我从click事件处理程序中删除对lightbox对象的调用，则e.preventDefault（）可以正常工作。

Answer 1

你的问题在这一行：

var lightbox = $("#lightbox");

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

$("#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();       
});

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

Answer 2

尝试是否有效

$("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;    
});

Answer 3

你有没有在声明的vars上面尝试过：

$("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

Answer 4

类似链接的示例：

<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();以阻止事件触发。

阻止链接执行它的href路径

4 个答案: