-4

私はこのコードを使用して、私のサイトで動作する単純なライトボックスを取得しています。

そして、私はそれを少し変更しようとしました:

a) ライトボックスがフェードインする - 完了

b) スクリプトは- Donesrcではなく属性を取り込みますhref

<img>b)クリックされている (またはタップされていると思われる)ライトボックスのカスタム "data-description" 属性からデータを取り込むことができます<p>。

問題

2 つ目は、画像が最初にクリックされたときに正常に動作します。他のものをクリックしたり、もう一度クリックしたりしても、何も起こりません-正しくやっているように見えるので、理由がわかりませんか?

また、jQuery 1.9 を使用するlive()と、どうやら減価償却されているようです。以前は 1.8.2 を使用していましたが、今まで気づきませんでした。試してみましたがうまくいきon()ませんでした。JS の初心者であり、修正方法について困惑しています。ライトボックスが閉じないこと。

ほぼ動作するが壊れたコード: http://codepen.io/hwg/pen/ybEAw - すべてのコメントについて申し訳ありませんが、その方が簡単だと思います。

JS:

$(document).ready(function() { //Document Ready


$('.inner_img').click(function(e) {
    //prevent default action (hyperlink)
    e.preventDefault();
    //Get clicked link href
    var image_src = $(this).attr("src");
    // Get Description
    var desc = $(this).attr("data-description");
    /*
    If the lightbox window HTML already exists in document,
    change the img src to to match the href of whatever link was clicked
    If the lightbox window HTML doesn't exists, create it and insert it.
    (This will only happen the first time around)
    */
    if ($('#lightbox').length > 0) { // #lightbox exists
        //place href as img src value
        $('#content').html('<img src="' + image_src + '" />');
        // Change Description in the P tag
        $('.desc').html(' '+ desc +' ');
        //show lightbox window - you could use .show('fast') for a transition
        $('#lightbox').fadeIn(); // Fades it in
    }
    else { //#lightbox does not exist - create and insert (runs 1st time only)
        //create HTML markup for lightbox window
        var lightbox =
        '<div id="lightbox">' +
            '<p>Click to close</p>' +
            '<div id="content">' + //insert clicked link's href into img src
                '<img src="' + image_src +'" />' +
                '<p class="desc">'+ desc +'</p>' + // Adds Description from <img data-description="..">
            '</div>' +
        '</div>';
        //insert lightbox HTML into page
        $(lightbox).hide().appendTo("body").fadeIn();


    }
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').on('click', function() { //must use live, as the lightbox element is inserted into the DOM

    $("#lightbox").fadeOut(); // Fades it out
});



}); // End

助けてくれてありがとう。

編集live: /の問題は非常に一般的であることが示されていonます。どこが間違っているかがわかります。このコメント投稿者の支援に感謝します。

しかし、私のコードが 2 番目の問題で機能しないのはなぜですか?

4

2 に答える 2

2

on でイベント委任を使用する -

$(document.body).on('click','#lightbox', function() { 
    $("#lightbox").fadeOut(); // Fades it out
});

デモ---> http://codepen.io/anon/pen/ywJhe

于 2013-06-24T11:15:30.457 に答える
0

あなたは変えられる

$('.inner_img').click(function(e) {

に

$(document.body).on('click', '.inner_img', function(e) {

そのため、バインド後に発生するイベントは引き続き新しい要素に委任されます。

于 2013-06-24T11:15:35.243 に答える