[英]Append <li> element to <ul> and add click event for each?
我想向<ul>
添加一系列<li>
元素,并以编程方式为每个元素添加一个点击事件。
我不确定如何做到这一点,至少不是以一种简洁的 jQueryish 方式。
这是我现有的代码:
<ul id="saved-list"></ul>
<script type="text/javascript">
$.each(all_objects, function() {{
var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
$('#saved-list').append(list_route);
// add unique id (this.id) to item and click event here?
// pseudocode - onclick: alert(this.id);
});
$('#saved-list').refresh('listview'); // jquery mobile list refresh
</script>
请有人建议如何以编程方式向每个列表项添加点击事件?
更新:我需要为每个列表项做一些稍微不同的事情(让我们说一个警报) - 很抱歉没有说清楚。
你最好使用.live()
或.delegate()
而不是担心在你创建的每个元素上创建一个 .click .click()
处理程序。 像这样的东西:
$('#saved-list').delegate('li', 'click', function () {
// do stuff on click
});
您只需绑定此单击侦听器一次,它将适用于 ID saved-list
的元素的后代的每个<li>
。
如果您确实想为每个<li>
创建一个单独的单击处理程序(但我不推荐这样做),这是一个很好的方法:
$.each(all_objects, function() {
var $a = $('<a/>', {
href: '#saved-route',
text: this.text
});
var $li = $('<li/>', {
click: function () {
// do stuff on click
}
}).append($a);
$('#saved-list').append($li);
});
不。
与其为每个元素绑定一个新的事件处理程序(这可能会变得非常昂贵),不如将一个事件处理程序绑定到#saved-list
,这是一个共同的祖先。 事件冒泡意味着祖先元素被通知其后代的事件,因此您可以在那里处理事件而不是原始元素。
像这样的东西...
$.each(all_objects, function() {{
var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
$('#saved-list').append(list_route);
});
$('#saved-list').delegate('li', 'click', function() {
// do something here each time a descendant li is clicked
});
@Matt Ball 非常接近这里的答案,但我会更清楚地补充一点,您可以根据单击的元素对委托做不同的事情:
<ul id="saved-list"></ul>
<script type="text/javascript">
var $savedList = $("#saved-list");
$.each(all_objects, function() {
$savedList.append("<li><a href='#saved-route'>" + this.text + "</a></li>");
});
$savedList.delegate("li", "click", function (e) {
alert($(this).text());
});
$('#saved-list').refresh('listview'); // jquery 手机列表刷新
请注意,在委托中, this
仍然指的是被点击的li
。
在当前循环中(或之后)添加它还不够吗?
$('#saved-list li').click(function(){ alert('hello'); });
你好,jquery 中的 phil 你可以创建 dom object 而不将它们作为文本添加到 dom。 这将为您提供在添加之前(以及之后)操作它们的机会。
$("<li />")
.append(
$("<a />")
.attr("href" ,"#saved-route")
.text(this.text))
.click(function() {
// your click event
})
.appendTo("#saved-list");
您可以使用live
function,缺点是您可能需要一些机制来准确确定已单击的li
项目:
$("#saved-list li").live('click', function() {
//act on click
});
这就是bind
存在的原因。
$.each(all_objects, function(index) {{
$("#saved-list").append("<li id='item" + index + "'><a href='#saved-route'>" + this.text + "</a></li>");
$("#saved-list li").bind("click", function() {
alert("Clicked on " + this.id);
});
});
此外,这种方式很容易为每个项目创建不同的点击:
$("#saved-list li#item1").bind(...)
$("#saved-list li#item2").bind(...)
$("#saved-list li#item3").bind(...)
$.each(all_objects, function() {{
var list_route = "<li><a href='#saved-route'>" + this.text + "</a></li>";
var newLi = $(list_route);
newLi.click( function(){} ).attr("id","foo");
//if you want the a
newLi.find("a").click( function(){} ).attr("id","foo");
$('#saved-list').append(newLi);
});
.click
function 会将点击处理程序 function 绑定到任何给定元素。 正如您的代码中的注释所提到的,您可以使用 ID 或其他方式对 select 项目进行 DOM 化后,但另一种方法是简单地引用包含您要绑定的元素的变量。
例子:
var li = $('<li />');
li.click(function() { ... });
这可能有点风格,但 jQuery 的特点之一是它是可链接的。 这意味着 jQuery function 调用始终返回对 jQuery 本身的包装集的引用。 使用可链接方面,您可以像这样重写上面的代码:
var list = $('#saved-list'); $.each(all_objects, function(i, item) {{
list.append(
$('<li />')
.append(
$('<a />').text(item.text)
)
.click(function() { ... } );
);
});
虽然我不知道这个$('#saved-list').refresh('listview')
业务是关于什么的,但您可能正在寻找以下内容:
var listItemEls = all_objects.map(function () {
return $('<li id="' + this.id + '"><a href="#saved-route">' + this.text + '</a></li>')
.click(function (e) {
// do whatever here
})
.get();
});
$('#saved-list').append(listItemEls);
请注意,我们避免在最后一分钟之前追加到 DOM,因为追加是昂贵的。
正如其他海报所提到的,通常使用委托的点击处理程序是一种更好的方法。 那看起来像
var listItemEls = all_objects.map(function () {
return $('<li id="' + this.id + '"><a href="#saved-route">' + this.text + '</a></li>')
.get();
});
$('#saved-list').append(listItemEls)
.delegate("li", "click", function (e) {
// do stuff here.
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.