1

この件名が何度もハッシュ化されている場合はお詫びします。これに関する複数の投稿を読み、jsfiddle でさまざまなアプローチを試しました。

基本的に、私は以下のケースで lis のコンテンツにアクセスしたいと思います。ボタンをクリックして ul に lis を追加します (この場合、クリックは常に同じコンテンツを追加します-リンゴ、実際のアプリでは、のコンテンツli はそれぞれ異なります. 1 つの 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>
4

1 に答える 1

2

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>
});
于 2012-08-31T20:20:52.393 に答える