我试图在使用jquery .each()方法的ul中迭代li's,但单击函数未被启动。
基本HTML
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="product-list">
<ul class="list-inline">
</ul>
</div>
</div>
</div>
在页面加载时使用以下jquery函数
填充JQUERYproductLoad: function() {
for (var i = 0; i < state.greens.length; i++) {
$(".product-list ul").append("<li><div class='product'><p> " + state.greens[i].name + " </p></div></li>");
}
},
productLoad是名为display的更大对象的一部分,由display.productLoad();
我试着写一个函数,调用另一个名为display.arrange(arg)的函数,导致页面显示大量关于state.greens中相应对象的信息。
我试图使用jquery的。each方法如下:
JQuery$(".product-list > li").each(function(index) {
$(this).click(function() {
display.arrange(index);
})
});
我的想法是为每个处于状态的对象添加一个li。然后使用.each初始化一个函数,该函数引用每个li在状态中的对应位置。
但是,当我单击li's时,根本没有发生任何事情,并且控制台中没有与该函数对应的错误消息,因此我不认为正在调用单击处理程序。
你可以看到我在这个页面上的一个工作示例:点击进入页面
向下滚动到"Click On A Product to Go to Its Detail Page"的地方,你会看到带有每个样式化的li的ul,代表state.greens中的每个产品。
试试这个:
$(".list-inline").on("click", ">li", function(){
display.arrange($(this).index());
});
检查您的HTML
代码,您的CSS选择器是错误的。考虑到>
用于获取直接子元素,那么您的CSS应该开始选择UL
标签以获取其所有LI
子元素
改变:
$(".product-list > li")....
由:
$("ul.list-inline > li")...
我相信这是因为您正在使用jQuery创建(即追加)您的<li>
s。也就是说,当页面加载时,它们不在初始DOM中。所以你需要使用jQuery的。以委托单击事件。我也不确定我完全理解你想要完成什么,但我不认为这需要在.each
…您应该能够执行以下操作并使用this
:
试着切换你的jQuery:
$(".product-list > li").each(function(index) {
$(this).click(function() {
display.arrange(index);
})
});
:
$(".product-list").on("click", "li", function(index) {
// Run functions, mo' jQuery, etc.
});
这应该会让你的点击注册。从那里,您在.on("click")
内运行的内容取决于您。