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コールバック関数では、hide変数名は、クリックコールバックの外部で定義されたグローバルライトボックスオブジェクトの名前と同じです。上記のローカル変数は、その関数スコープ内のグローバル変数をオーバーライドするだけです。基本的に、あなたは次のように呼ん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

宣言された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
于 2013-03-11T11:50:30.003 に答える
0

次のようなリンクの例:

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

jQuery で JavaScript を使用する

$("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 に答える