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>添加任何元素。您仅在单击时添加它们。

这里有几种解决方案。一种是将事件直接绑定到创建的元素：

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

注意：直播是贬值的！！这是 jQuery 1.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 回答