我有一个创建专辑的函数和 jquery 的 post 函数,然后它创建必要的 HTML 元素并将它们附加到文档中。问题是元素是一个链接及其目标,而当我刷新页面时链接工作正常,浏览器似乎找不到使用 jquery 创建的添加目标。我怎么能用 javascript 创建一个用 jquery 或 javascript 创建的元素。提前谢谢。编辑:
代码:
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('★ 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;
}
当使用 javascript 添加第二个链接时的问题,它似乎对函数不可见。任何帮助thanx提前。
注意:此灯箱代码来自 PHPacademy 教程。
注意:如果您要给出关于重写函数的答案并将其重新分配给新创建的元素,我已经知道我需要另一种方法。
提前谢谢。