Question

如果这个主题经过几次散列道歉，我已经阅读了多篇文章，并在jsfiddle中尝试了各种方法。

基本上，我想在下面的情况下访问lis的内容我通过点击一个按钮将lis添加到ul（在这种情况下，点击总是在真实应用中添加相同的内容 - apple，每个li的内容都不同。我希望能够点击一个li并访问该特定li的内容。

下面的代码将我带到ul但不是ul中的具体li或li的内容 - 任何想法都会非常感激。

<!DOCTYPE html>
<html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    </head>

    <body>
    <button id="testfood" type="button">Test</button>

        Fruits: <div id="fruits"><ul id="ul_fruits"  class="ul_fruits"><li>Fruit test li</li></ul></div>    </body>
</html>

这是JS

<script type="text/javascript">
$(document).ready(function() {

    $("#testfood").click(function(event) {
        $('#ul_fruits').append("<li><a href='#'>" + "apple" + "</a>" + "</li>");
    });

    $("#ul_fruits").click(function(e){
        console.log("click on #ul_fruits");
        alert(this);

        var index = $(this).index();
        alert("index " + index);
    });
});
</script>

Answer 1

您可以使用jQuery的事件委派系统。基本上，您获得了被点击的<a>，它会自动为您添加的元素工作。此外，<a href="#">将导航您可能不想要的内容。

// bind it to the <ul>, run when an <a> is clicked inside the <ul>
$("#ul_fruits").on("click", "a", function(e) {
  e.preventDefault();  // prevent navigating
  var text = $(this).closest("li").text();  // `this` is the <a>; get the text of the <li>
});

在ul中动态创建可点击的li并选择li内容

1 个答案: