Stoping a link from executing it's href path
<p>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:</p>

<pre><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){
        $("&lt;div id='lightbox-background'&gt;&lt;/div&gt;").appendTo("body");
        $("&lt;div id='lightbox'&gt;&lt;/div&gt;").appendTo("body");
        $("&lt;p&gt;&lt;/p&gt;").appendTo("#lightbox");
        $("&lt;a href='#' id='ok'&gt;OK&lt;/a&gt;").appendTo("#lightbox");
        $("&lt;a href='#' id='cancel'&gt;Cancel&lt;/a&gt;").appendTo("#lightbox");
    }
}
</code></pre>

<p>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?</p>

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