Question

我有一个创建相册和jquery的post函数的函数，然后它创建必要的HTML元素并将它们附加到文档中。问题是元素是一个链接及其目标，而当我刷新页面时，链接工作正常，浏览器无法找到使用jquery创建的添加目标。我如何使用jquery或javascript创建的javascript来定位元素。提前。编辑：

the jsfiddle code

代码：

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;
}

the jsfiddle link

第二个链接添加了javascript时的问题似乎是llike它对函数不可见。任何提前帮助。

注意：此灯箱代码来自PHPacademy教程。

注意：如果您要给出关于重写函数的答案并将其重新分配给新创建的元素，我已经知道我需要另一种方式。

提前完成。

Answer 1

试试这个：

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

DEMO HERE

<强>更新

由于lightbox类元素是动态添加的，因此您需要使用event delegation来注册事件处理程序，如： -

// 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');
});

DEMO HERE

Answer 2

如何在jQuery post的回调函数中定位元素？在此回调函数中，首先将元素附加到文档，然后将其作为目标。

Answer 3

据我了解，您希望在点击“点击测试”时触发相同的灯箱动画。当你点击“打开灯箱”时？

在这种情况下，.click()只是将事件处理程序绑定到CURRENT匹配元素集。您要找的是.on()或.delegate()

Fiddle

如何使用javascript定位jquery创建的div

3 个答案: