1

私のコード：

<script>
        function abc(){
          for (var i = 0; i < 3; i ++)
          {
             var t = $('<li></li>').text(i);    
             $("ol").prepend(t);
          }
        }
        $(document).ready(function(){
          $("li").click(function(){
            $(this).hide();
          });
        });
</script>

HTML：

<body> 
  <button onclick = "abc()">asdf</button> 
  <p>If you click on me, I will disappear.</p> 
  <ol> 
    <li>Click me away!</li> 
    <li>Click me too!</li> 
  </ol>
</body>

作成した（li）をクリックすると、非表示にならないのはなぜですか？どうすればいいですか？

4

4 に答える 4

2

DOMがロードされるとき、<li>要素はまだ追加されていないためです。クリックのみで追加します。

ここにはいくつかの解決策があります。1つは、イベントを作成された要素に直接バインドすることです。

for (var i = 0; i < 3; i++) {
    $("<li></li>").text(i).on("click", function() {
        $(this).hide();
    }).prependTo("ol");
}

デモ：http： //jsfiddle.net/Xgr22/

別の方法は、イベント委任を使用することです。

$("ol").on("click", "li", function() {
    $(this).hide();
});

デモ：http： //jsfiddle.net/Xgr22/1/

于 2013-03-27T14:13:27.883 に答える
1

これを試して：

$(document).ready(function(){
      $('ol').on('click','li',function(){
        $(this).hide();
      });
    });

これにより、すべての'li'要素がクリックされたときに、既に作成されているか、後で作成されているかに関係なく、クリックハンドラーが起動されます。

于 2013-03-27T14:14:50.233 に答える
0

注意：ライブは減価償却されます!! これは、jQuery1.7より前の方法です。

使用しているjQueryのバージョンによっては、1.7より前の場合は機能します 

 <script>
    function abc(){
      for (var i = 0; i < 3; i ++)
      {
         var t = $('<li></li>').text(i);    
         $("ol").prepend(t);
      }
    }
    $(document).ready(function(){
      $("li").live(function(){
        $(this).hide();
      });
    });
</script>
于 2013-03-27T14:16:07.213 に答える
-1

試す：

$('li').on('click', function () 
{
    $(this).hide();
});
于 2013-03-27T14:12:33.330 に答える