我对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/

10-09 05:48
查看更多