Question

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

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

然后我使用它添加它：

$("#menu ul.addition").append('<li><a href="#" id=addition' + userText + '>addition' + userText + '</a></li>');

用户文本是用户添加的一些唯一字符串。问题是当我在填充后尝试从菜单中获取特定的li时，它只返回第一个li。

$("#menu ul.addition").click(function() {
    var selected = $('#menu ul.addition a').attr('id');
    console.log(selected);
});

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

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

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

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

Answer 1

当您访问一组多个元素的属性时，您将获得该集合中第一个元素的属性。在您的代码中，只要点击id，就可以在<a>中选择第一个<ul>元素的<ul>。

为了确定点击了哪个<a>，最简单的方法是点击<a>元素，而不是点击<ul>容器。

由于在加载DOM后添加了<li>和<a>元素，因此您需要delegate您的点击处理程序。我建议将侦听器绑定到现有的<ul>，但是要点击任何以编程方式添加的子li > a元素。

然后，您可以使用JavaScript的this关键字来引用点击的元素并收集其＆＃34; id＆＃34;。

＆＃13;

var userText="SampleText";
$("#menu ul.addition").append('<li><a href="#" id="addition' + userText + '">addition' + userText + '</a></li>');

userText="AnotherSample";
$("#menu ul.addition").append('<li><a href="#" id="addition' + userText + '">addition' + userText + '</a></li>');


$("#menu ul.addition").on('click','li a',function() {
    var selected = this.id;
    $('div#output').html(selected);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
   <li><a href='#'>Add to this menu</a>
        <ul class = 'addition'>
        </ul>
   </li>
</ul>

<div id="output"></div>

＆＃13;

Answer 2

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

$("#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);
});

Answer 3

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);

这似乎是你想要的

Answer 4

首先，您已将<a href="#" id=addition' + userText + '>更改为<a href="#" id="addition' + userText + '">

运行$('#menu ul.addition a')时，jquery返回所有<a>个节点，但是当您尝试获取集合的ID时，Jquery会选择集合中的第一个节点。

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

$('#menu ul.addition #your-unique-id).click(doSomething)

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

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

Answer 5

如果您想获得特定的li，则需要使用this示例：

$("#add").click(function() {
  $(".addition").append('<li><a href="#">Item 1</a></li>');
  $(".addition").append('<li><a href="#">Item 2</a></li>');


  $(".addition li a").click(function() {
    var item = $(this).text();
    alert(item);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href='#' id="add">Add to this menu</a>
    <ul class="addition">
    </ul>
  </li>
</ul>

Answer 6

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

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

6 个答案: