jquery：将li项目动态附加到ul，然后添加click，但点击遍历每个li [英] jquery: dynamically appending li items to ul then adding click, but click runs through each li

问题描述

所以我可能会接近这个错误，因为我正在学习，但我似乎无法弄清楚我在这里做错了什么（可能是简单的错误，但我有麻烦）。所以我试图在标记中有一个按钮点击，允许从对话框中选择，并且对话框上的提交按钮包括调用自定义函数，该函数执行一些逻辑，然后将字符串附加到像：

  buildListElementItem + =< li> something< / li>; 
 $（＃my-list）。append（buildListElementItem）; 
  

然后绑定click，因为我需要这些列表项中的每一个代表选择面板类型的事物

  $（＃my-list li）。bind（'click'，function（）{
 //处理东西
}）; 
  

一切正常，但如果我向此列表中添加多个项目（一个接一个），而您点击一个项目，它滚动通过每一个，这使我感到困惑，因为没有每个项目，我认为这应该只添加到一个项目....

所以这个函数/ etc还有一堆，但我认为我的方法在这里是错误的？

我已经尝试修改选择器来像我添加的类在李的字符串中，我尝试使用.on，.live，.delegate或任何我能找到的，而不是绑定点击。

也许这是简单的方法类型错误，试图执行此操作，但我非常感谢任何帮助，建议等等。

编辑：只是增加更多的澄清

对话框允许用户从选择/下拉菜单中选择项目，按钮点击（jQuery UI）有功能在下面调用想法将该项目添加到作为选择面板的列表元素。因此，他们可以填充面板上所需的项目，然后单击每个项目来填充数据并将其与该项目相关联。

$ p $ function addNewListItem（passedType ）
{
var buildListElementItem =< li> + passedType +< / li>;
$（＃my-list）。append（buildListElementItem）;
$（＃my-list li）。bind（'click'，function（）{
otherStuff（）;
}）;


如果我这样做了，我在猜测这会导致每个元素都被绑定一次又一次？不确定，但是这个例外，当我点击该面板上的一个li项目时，它处理面板上所有li项目（otherStuff函数）。所以我认为，从例子中我开始明白这个问题或者为什么这不起作用，但是我将如何处理我正在尝试做的事情呢？总是感激的家伙！
}

解决方案

当你说没有每个时，你省略 $ （＃my-list li）是一个jQuery选择器，即它返回所有匹配表达式的元素：在这种情况下，＃my-list的子树中的所有li项。
因此，当您调用bind时，它将绑定到已添加到元素的每个li项目。

您正在寻找的是这样的东西：

  buildListElementItem = $（< li> something< / li>））; //构造一个jquery对象，你可以绑定到
 buildListElementItem.bind（'click'，function（）{
 //处理东西
}）; 
 $（my-list）。append（buildListElementItem）; 
  

通过这种方式，您可以在元素添加前绑定。

So I may be approaching this wrong as I am learning but I can't seem to figure out what I am doing wrong here (probably simple mistake but I am having trouble). So I am trying to have a within the markup, a button click that allows selection from dialog and the submit button on the dialog includes call to custom function that does some logic then appends string to the like:

buildListElementItem += "<li>something</li>";
$("#my-list").append(buildListElementItem);

then bind click because i need each of these list items to be representative of a selection panel type thing

$("#my-list li").bind('click', function () {
   //processing stuff
});

everything works fine but if I add more than one item to this list (one after another) and you click a single item, it rolls through each one, which confused me because there is no each and I think this should only add it to a single item....

so there is a bunch more to this function/etc but I think my approach right here is wrong??

I have tried modifying the selector to like a class that I add in the string for the li, I have tried using .on, .live, .delegate or anything I could find instead of bind click.

Perhaps this is simple approach type error to trying to perform this but I would great appreciate any help, advice, etc on this.

EDIT: just adding more for clarification

Dialog allows users to select item from select/drop down, and button click (jquery ui) has function that calls below idea to add the item to a list element, which serves as selection panel. So they can populate items needed on panel, then click each item to populate and associate data with that item.

function addNewListItem(passedType)
{
    var buildListElementItem = "<li>" + passedType + "</li>";
    $("#my-list").append(buildListElementItem);
    $("#my-list li").bind('click', function () {
       otherStuff();
});

if I do the above I am guessing that this cause every element to get binded over and over again? not sure, but this works with the exception that when I click a single li item on that panel, it processes for all li items on the panel (otherStuff function). So I think from the examples I am starting to understand the issue or why this won't work, but how would I approach what I am trying to do then? always appreciated guys! }

解决方案

When you say "there is no each", you omit that $("#my-list li") is a jQuery selector, i.e. it returns all the elements that match the expression: in this case, all the li items within the child tree of #my-list. Thus, when you call bind, it is going to bind to each li item that has already been added to the element.

What you are looking for is something along this:

buildListElementItem = $("<li>something</li>"); //constructs a jquery object you can bind to
buildListElementItem.bind('click', function () {
   //processing stuff
});
$("my-list").append(buildListElementItem);

This way, you bind before the element has been added.

这篇关于jquery：将li项目动态附加到ul，然后添加click，但点击遍历每个li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！