0

我有一个创建专辑的函数和 jquery 的 post 函数，然后它创建必要的 HTML 元素并将它们附加到文档中。问题是元素是一个链接及其目标，而当我刷新页面时链接工作正常，浏览器似乎找不到使用 jquery 创建的添加目标。我怎么能用 javascript 创建一个用 jquery 或 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 链接

当使用 javascript 添加第二个链接时的问题，它似乎对函数不可见。任何帮助thanx提前。

注意：此灯箱代码来自 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

How about to target element in callback function of jQuery post? In this callback function, append element to document first, then target it.

于 2012-12-05T07:47:26.130 回答
0

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

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

小提琴

于 2012-12-09T08:57:52.003 回答