Question

我对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;
    });
};

我也意识到我可能会从错误的角度接近这个，所以任何指针，帮助等都非常感激地接受了！

Answer 1

在将新创建的项目附加到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);
};

Answer 2

感兴趣的两个文档页面是jQuery's Delegate method和jQuery's template plugin。

更好的解决方案可能看起来像这样：

$('#sliderList').delegate('li a','click',function(event){
  event.preventDefault();
  // do stuff
});

建议使用live，因为您要在列表级别停止事件，而不是让事件在DOM树中一直冒泡。但使用delegate或live都会产生良好的效果。

这意味着您可以不断更改列表的内容，链接将继续按照需要运行。

我包含了模板插件的链接，因为这恰好是将结构化数据转换为HTML的绝妙方式，而无需在javascript中构建所有内容。

jQuery - 以编程方式创建动态链接

2 个答案: