我对jQuery和JavaScript编程还很陌生,想知道是否有人可以帮助我?
我有使用无序列表填充的滑块。效果很好,可以在按钮图像上动态呈现文本。每个列表项都包含一个调用函数的链接。例如:
<li><div class="btnGraphic"><img src="images/button.png" /><a href="#" id="my_link"><div class="btnText">'MyTitle'</div></a></div></li>';
但是,我现在希望使用和XML文件动态填充整个页面。页面上将没有静态内容,因此滑块内容必须能够更改并采用可变数量的按钮和链接。
我已经从XML文件中检索了数据并将其存储在多个数组中。
现在,用于添加列表项的代码如下:
for (i = 1; i < count; i++) {
var newListItem = '<li><div class="btnGraphic"><img src="images/button.png" /><a href="#" id="'+myLink[i]+'_link"><div class="btnText">'+myTitle[i]+'</div></a></div></li>';
$("#sliderList").append(newListItem);
};
到目前为止,一切都很好。我认为。但是,我无法进一步前进的地方是以编程方式创建链接。该链接将打开jQueryUI对话框。静态页面上链接的代码如下:
$('#my_link').click(function(){
clearScreen(); //clears any open dialog boxes
$('.myContent').dialog('open');
return false;
});
我要问的是如何以编程方式创建此代码?以下是,我知道绝对不正确,还有很长的路要走,但是它给出了我想做什么的想法:
for (i = 1; i < count; i++) {
$("'"+myLink[i]+"_link'").click(function() {
clearScreen(); //clears any open dialog boxes
$("'."+myContent[i]+"'").dialog.('open');
return false;
});
};
我也意识到我可能会从错误的角度来解决这个问题,因此非常感谢收到任何指针,帮助等!
最佳答案
您可以在将新创建的项目附加到DOM树之前,附加点击处理程序(即所谓的“链接”)。尝试将块修改为以下内容:
for (i = 1; i < count; i++) {
var myNewContent = "."+myContent[i]; // bind myContent[i] to the closure
var newLink = $('<a href="#" id="'+myLink[i]+'_link"><div class="btnText">'+myTitle[i]+'</div></a>');
newLink.click(function() {
clearScreen(); //clears any open dialog boxes
$(myNewContent).dialog('open');
return false;
});
var newListItem = $('<li />').append(
$('<div class="btnGraphic" />').append(
'<img src="images/button.png" />',
newLink
)
);
$("#sliderList").append(newListItem);
};
关于jquery - jQuery-以编程方式创建动态链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5680520/