0

アルバムを作成し、jquery の post 関数を使用して必要な HTML 要素を作成し、ドキュメントに追加する関数があります。問題は、要素がリンクとそのターゲットであることですが、ページを更新するとリンクが正常に機能しますが、jquery で作成された追加のターゲットがブラウザで見つからなかったようです。jquery または javascript で作成された javascript を持つ要素をターゲットにする方法を教えてください。事前に感謝します。編集：

jsfiddle コード

コード：

btn        = document.getElementById('add_album_btn');
btn.addEventListener('click', add_album_btn_func, false);
function add_album_btn_func(){
    div              = $('<div>').addClass('albums_div');
    a                = $('<a>').addClass('albums');
    a.attr('onclick', 'return false;');
    a.attr('onmousedown', 'autoScrollTo("new_section");').attr('href', '#');
    a.append('&#9733; New Album');
    div.append(a);
    section          = $('<section>').attr('id', 'new_section');
    header           = $('<header>').addClass('inner_header');
    header.append($('<h4>').append('New Album'));
    inner_section    = $('<section>').append($('<h5>').append('Images List :'));
    footer           = $('<footer>').addClass('inner_footer');
    upload_btn       = $('<a>').attr('id', 'new_section').addClass('upload_file ajax');
    upload_btn.attr('href', 'some/link/');
    upload_btn.append('Upload a file');
    footer.append(upload_btn);
    section.append(header);
    header.after(inner_section);
    inner_section.after(footer);
    $('#wrap').append(div);
    $('#separator').after(section);
}
var scrollY          = 0;
var distance         = 40;
var speed            = 24;
function autoScrollTo(el){
    var currentY     = window.pageYOffset;
    var targetY      = document.getElementById(el).offsetTop;
    var bodyHeight   = document.body.offsetHeight;
    var yPos         = currentY + window.innerHeight;
    var animator     = setTimeout('autoScrollTo(\'' + el + '\')', speed);
    if(yPos >= bodyHeight){
        clearTimeout(animator);
    }else{
        if(currentY < targetY - distance){
            scrollY = currentY + distance;
            window.scroll(0, scrollY);
        }else{
            clearTimeout(animator);
        }
    }
}​

編集:明らかに、私が欲しいものは次のように十分に明確ではありませんでした:私はこのjavascriptコードを持っています:

$(document).ready(function(){
    $('.lightbox').click(function(){
        $('.backdrop').animate({'opacity': '.50'}, 300, 'linear');
        $('.box').animate({'opacity': '1.00'}, 300, 'linear');
        $('.backdrop, .box').css('display', 'block');
    });
    $('.close').click(function(){
        close_box();
    });
    $(".backdrop").click(function(){
        close_box();
    });
    function close_box(){
        $('.backdrop, .box').animate({'opacity': '.0'}, 300, 'linear', function(){
            $('.backdrop, .box').css('display', 'none');
        });
    }
    a = $('<a>').addClass('lightbox').attr('href', '#').append('<br>Click to Test.');
    $('body').append(a);
});

html:

<h1>jquery light-box</h1>
<a href=# class=lightbox>open lightbox</a>
<div class="backdrop"></div>
<div class="box"><div class="close">X</div>this is the light box</div>

CSS:

body{
    font-family: Helvetica, Arial;
}
.backdrop{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: .0;
    z-index: 50;
    display: none;
}
.box{
    position: absolute;
    top: 20%;
    left: 30%;
    width: 500px;
    height: 300px;
    background: #ffffff;
    z-index: 51;
    padding: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px #444444;
    display: none;
}
.close{
    float: right;
    margin-right: 6px;
    cursor: pointer;
}

jsfiddle リンク

2番目のリンクがjavascriptで追加されたときの問題は、関数には見えないようです。事前に感謝します。

注: このライトボックス コードは、PHPacademy チュートリアルからのものです。

注：関数の書き換えについて答えを出し、それを新しく作成された要素に再割り当てする場合、別の方法が必要であることはすでにわかっています。

事前に感謝します。

4

3 に答える 3

1

これを試して：

$(".lightbox").live("click", function() {
        $('.backdrop').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('.box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, .box').css('display', 'block');
    });

デモはこちら

アップデート

クラス要素は動的に追加されるため、イベント委任を使用して、次のようなイベント ハンドラーを登録するlightbox必要があります。

// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document.body).on('click', '.lightbox', function (e) {
    e.preventDefault();
    $('.backdrop').animate({
        'opacity': '.50'
    }, 300, 'linear');
    $('.box').animate({
        'opacity': '1.00'
    }, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
});

デモはこちら

于 2012-12-09T08:57:07.893 に答える
0

私が理解している限りでは、[クリックしてテスト] をクリックしたときに、同じライトボックス アニメーションをトリガーしたいと考えています。「ライトボックスを開く」をクリックしたときのように？

その場合、.click()イベント ハンドラーを一致する要素の CURRENT セットにバインドするだけです。あなたが探しているのは.on()、または.delegate()

フィドル

于 2012-12-09T08:57:52.003 に答える
0

jQuery投稿のコールバック関数で要素を対象にするのはどうですか？このコールバック関数では、最初に要素をドキュメントに追加してから、それをターゲットにします。

于 2012-12-05T07:47:26.130 に答える