0

私には不可解な難問があります：

私はこのJSを持っています： 更新されたJSを編集してください

 $(".img-thumb").on("click", function(){ // exhibiting the same behaviour as .click()
    thumbID = $(this).attr("id");
    console.log(thumbID);
    $(".gal-act").removeClass("gal-act");
    $(this).addClass("gal-act"); // as suggested below
});

これは、.load（）jquery関数を使用してページに挿入されたhtmlの一部に作用することを目的としています。パズルは、元のファイルとして表示されたときにhtmlで機能することです（ここにあるように：http：//keithneilson.co.uk/experimental/products/Data/prod-data.html、そしてはい、画像が欠落していることを知っています、しかし、誰もこのページを単独で見ることを意図していません）。そのリンクからわかるように、コードはサムネイルの左の境界線を変更して、現時点でどちらが選択されているかを示すことを目的としています。このパズルを解いたら、他の機能を追加します。

これは、最終ページにポップアップとして挿入されたものと同じhtmlです（スライドショーの下の赤いボックスをクリックします）： http： //keithneilson.co.uk/experimental/products/。ご覧のとおり、画像は機能するようになりましたが、サムネイルをもう一度クリックすると、スクリプトが機能していないことがわかります（ログ出力もありません）。

これで、同じhtmlと同じjavascriptになりましたが、機能していません。私の質問はなぜですか、そして既知の回避策はありますか？

4

2 に答える 2

1

jQueryのバージョンに応じて、.on()またはの.live()代わりにを使用します。.click()

編集：このjquery .live（'click'）と.click（）の詳細

于 2013-02-28T11:08:25.107 に答える
1

理由を答えましょう。

クリック機能を使用してイベントをバインドしている場合、現在 DOM に存在する要素にのみクリック イベントをバインドしているため、ciick イベントが登録されたときに、HTML が後で読み込まれたときに DOM に存在しませんでした。そのため、イベントは要素にバインドされていません。

@hexblot が提供する提案を試してください。

アップデート： 

$('body').on('click', '.img-thumb', function(){
    thumbID = $(this).attr("id");
    console.log(thumbID);
    $(".gal-act").removeClass("gal-act");
    $("#"+thumbID).addClass("gal-act");
});
于 2013-02-28T11:21:06.883 に答える