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

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

我也意识到我可能会从错误的角度来解决这个问题，因此非常感谢收到任何指针，帮助等！

已邀请:

2 个回复

丧泉缝锋

您可以在将新创建的项目附加到DOM树之前，附加点击处理程序（即您所说的\'link \'）。尝试将块修改为以下内容：

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 \的Delegate方法和jQuery \的模板插件。更好的解决方案可能看起来像这样：

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

建议不要使用live，因为您是在列表级别停止事件，而不是让事件一直冒泡到DOM树。但是使用delegate或live都会产生良好的结果。这意味着您可以继续更改列表的内容，链接将继续按需要工作。我包括了指向模板插件的链接，因为这恰好是一种将结构化数据转换为HTML的绝妙方法，而无需借助JavaScript来全部构建。

要回复问题请先登录或注册

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

2 个回复

发起人

jquery

dynamic

hyperlink

问题状态

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

与内容相关的链接

2 个回复

发起人

jquery

dynamic

hyperlink

问题状态