.each()未初始化click处理程序

.each() not initiating click handler

本文关键字：click 处理 程序 初始化 each      更新时间：2023-09-26

我试图在使用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函数

填充JQUERY 

productLoad: 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")内运行的内容取决于您。

相关文章：