CODEWITHSUNDEEP
javascriptjquery
aleczandru
aleczandru

Reputation: 5459

Stoping a link from executing it's href path

Hi I am trying to stop a link from executing it's default action , but I seem to have no luck.Here is my code:

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

I hoped that if I used e.preventDefault it would stop the link from from going to it's href path but it did not work.Am I doing something wrong?

EDIT: I just noticed that if I remove the call for the lightbox object from the click event handler the e.preventDefault() works.

Upvotes: 0

Views: 97

Answers (4)

MarmiK
MarmiK

Reputation: 5785

Example for a link like: 

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

use javascript with jQuery

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

this will not redirect any link on the page :)

or in given case it will be like

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

Note: Added e.preventDefault(); to prevent the event from triggering.

Upvotes: 0

Viktor S.
Viktor S.

Reputation: 12815

Your problem is in this line:

var lightbox = $("#lightbox");

in onclick callback function hide variable name is the same as name of global lightbox object defined outside click callback. Local variable mentioned above simply override global variable inside that function scope. Basically, you are calling init of $("#lightbox"):

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

Not sure what are you doing, but try to update your code like this:

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

Besides, calling 

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

at the first time, you will get an empty set of elements as init method is not executed at that moment and elements you are looking for are not created yet.

Upvotes: 2

Jai
Jai

Reputation: 74738

Have you tried it above the vars declared:

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

Just noticed that you have missed a ';' at closing here:

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

Upvotes: 0

K D
K D

Reputation: 5989

Try if it works

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

Upvotes: 0

Related Questions