Javascript Jquery以编程方式添加li，获取id将返回所有li元素

每次用户单击按钮时，我都会以编程方式将li元素添加到菜单中。这是开始菜单：

<ul id="menu">
   <li><a href='#'>Add to this menu</a>
        <ul class = 'addition'>
        </ul>
   </li>
</ul>

始终记录第一个菜单项，即使有许多菜单项正在填充。当我将选择更改为选择html时，如下所示：

var selected = $(this).html();
console.log(selected);

它只记录添加到菜单中的每个li元素

我做错了什么？我需要选择用户单击的正确菜单选项。

var$li=$（“
”）；
$("#menu ul.addition").on('click', 'li', function() {
console.log($(this).attr('id'));
});

$li.单击（函数（）{
var selected=$（this.html（）；
console.log（选中）；
});
$（“#菜单添加”）。附加（$li）；

---

这似乎是您想要的

当您访问一组多个元素的属性时，您将获得集合中第一个元素的属性。在代码中，您正在选择第一个单击处理程序的

id

。我建议将侦听器绑定到您现有的

，但监听是否单击任何以编程方式添加的子

li>元素

然后，您可以使用JavaScript的关键字引用单击的元素并收集其“id”


var userText=“SampleText”；
$（“#菜单添加”）.append（“
”）；
userText=“AnotherSample”；
$（“#菜单添加”）.append（“
”）；
$（“#菜单ul.addition”）。在（'click'，'li a'，function（）上{
var selected=this.id；
$（'div#output'）.html（选中）；
});







首先，您必须将
更改为

当您运行
$（'#menu ul.addition a'）
jquery返回所有
节点时，但当您尝试获取集合的ID时，jquery选择集合中的第一个节点

如果要在列表中选择特定项目，请使用唯一ID

$（'#菜单ul.addition#您的唯一id）。单击（doSomething）

如果要创建用于单击任何添加项的通用函数：

$("#menu ul.addition").on('click', 'a', function(ev){
console.log(this);
})

如果要获取特定的li，需要使用以下示例：


$（“#添加”）。单击（函数（）{
$（“.addition”）.append（“
”）；
$（“.addition”）.append（“
”）；
$（“.addition li a”）。单击（函数（）{
var item=$（this.text（）；
警报（项目）；
});
});






我认为你或多或少走在了正确的轨道上。如果您稍微更改了单击功能，则可以获得用户单击的菜单选项的ID。这是一本书

在单击处理程序中，如何定义所选变量
？刚才进行了编辑，我将其设置为$（'#menu ul.addition a'）.attr（'id'）；您想记录已单击的
吗？似乎您需要
live
或
上的
“始终记录第一个菜单项”-当然需要；：“获取匹配元素集中第一个元素的属性值”
$("#menu ul.addition").on('click', 'li', function() {
console.log($(this).attr('id'));
});

var $li = $('<li><a href="#" id=addition' + userText + '>addition' + userText + '</a></li>');
$li.click(function(){
var selected = $(this).html();
console.log(selected);
});
$("#menu ul.addition").append($li);

$("#menu ul.addition").on('click', 'a', function(ev){
console.log(this);
})

$("#menu ul.addition").click(function(e) {
    alert(e.target.id);
    for (var prop in e) {
        console.log(prop + " : " + e[prop]);
    }
    $('#menu ul.addition a').attr('id');
//    console.log(selected);
});