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>';

我的问题是如何以编程方式创建此代码？以下是，我知道绝对不正确，还有很长的路要走，但它给出了我想做的事情的想法：

for (i = 1; i < count; i++) {
    $("'"+myLink[i]+"_link'").click(function() {
        clearScreen(); //clears any open dialog boxes
        $("'."+myContent[i]+"'").dialog.('open');
        return false;
    });
};

for（i=1；i

---

我也意识到，我可能是从错误的角度来看待这一点，因此，我非常感谢您的指点、帮助等

两个感兴趣的文档页面是和

更好的解决方案可能如下所示：

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

建议不要使用

live

，因为您是在列表级别停止事件，而不是让事件在DOM树上一直冒泡。但是使用

delegate

或

live

都会产生良好的效果

这意味着您可以不断更改列表的内容，并且链接将继续按需要工作

---

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

两个感兴趣的文档页面是和

更好的解决方案可能如下所示：

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

建议不要使用

live

，因为您是在列表级别停止事件，而不是让事件在DOM树上一直冒泡。但是使用

delegate

或

live

都会产生良好的效果

这意味着您可以不断更改列表的内容，并且链接将继续按需要工作

---

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

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

for（i=1；i'）。追加(
$（''）。追加(
'',
新链接
)
);
$（“#滑块列表”）.append（newListItem）；
};

在将新创建的项附加到DOM树之前，可以附加click处理程序（即您称之为“链接”）。尝试将块修改为以下内容：

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

for（i=1；i'）。追加(
$（''）。追加(
'',
新链接
)
);
$（“#滑块列表”）.append（newListItem）；
};

顺便说一句：将

包装在

周围是无效的HTML。啊，好的，谢谢！我会调查的！顺便说一句：将

包装在

周围是无效的HTML。啊，好的，谢谢！我会调查的！非常感谢您的快速回复！我尝试过这段代码，但它似乎为每个按钮创建了相同的单击处理程序（列表中的最后一项）。有什么想法吗？啊，好的，我知道了！它需要结束。根据[此处。非常感谢您的快速响应！我已经尝试了代码，但它似乎为每个按钮创建了相同的单击处理程序（列表中的最后一项）。有什么想法吗？啊，好的，我找到了！它需要关闭。根据[这里。谢谢！以上解决方案目前正在运行，所以短期内我将继续。感谢帮助将检查模板插件！谢谢！以上解决方案目前正在运行，所以短期内我将继续。感谢帮助将检查模板插件！