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

Question

抱歉，如果这个主题已经被多次讨论，我已经阅读了多篇关于这个的帖子，并且还在 jsfiddle 中尝试了各种方法。

基本上，我想在下面的情况下访问 lis 的内容，我通过单击按钮将 lis 添加到 ul（在这种情况下，单击总是添加相同的内容 - 苹果，在真实的应用程序中，每个 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>
});