Question

我使用rel属性动态地在li中附加li。现在我需要选择最后一个li及其属性。但它无法选择动态添加的li。

  var lastRel = $("#ulid li:last").attr("rel");


$("#addLi").on('click', function(){
$("ul").append('<li rel="5">5</li>');
});


$("#getLast").on('click', function(){
alert(lastRel);
});

检查这个小提琴..

FIDDLE

Answer 1

您需要将代码放在按钮点击中获取li的最后一个引用的位置：

$("#getLast").on('click', function(){
    var lastRel = $("#ulid li:last").attr("rel");
    alert(lastRel);
});

这是因为当您最初设置变量时，当只有4 li时，它处于页面加载状态。

更新上一个li后，您需要再次设置变量。

$("#addLi").on('click', function(){
  $("ul").append('<li rel="5">5</li>');
});


$("#getLast").on('click', function(){
  var lastRel = $("#ulid li:last").attr("rel");
  alert(lastRel);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ulid">
  <li rel="1">1</li>
  <li rel="2">2</li>
  <li rel="3">3</li>
  <li rel="4">4</li>
</ul>

<input type="button" id="addLi" name="addLi" value="Add Li">

<input type="button" id="getLast" name="getLast" value="Read Last LI">

Answer 2

添加新的lastRel

后，您需要更新<li>

$("#addLi").on('click', function(){
    $("ul").append('<li rel="5">5</li>');
    lastRel = $("#ulid li:last").attr("rel");
});

$("#getLast").on('click', function(){
    alert(lastRel);
});

FIDDLE

Answer 3

你所做的一切都是对的，你错放了这段代码

var lastRel = $("#ulid li:last").attr("rel");

这段代码应该出现在你的点击事件中。

但是我建议你动态地为李提供Id。所以你可以直接访问选择器。

示例：

<li id="name-1"></li>
<li id="name-2"></li>

所以在我的jQuery中我可以做这样的事情

$("#name-"+id).val();

在Jquery中选择动态添加的li

3 个答案: