Question

我的代码：

<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）时 - 它不隐藏？我该怎么办？

Answer 1

因为加载DOM时，尚未添加<li>个元素。您只需点击即可添加它们。

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

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

DEMO： http://jsfiddle.net/Xgr22/

另一种方法是使用事件委派：

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

DEMO： http://jsfiddle.net/Xgr22/1/

Answer 2

试试这个：

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

这可确保所有“li”元素在单击时触发单击处理程序，无论它们是否已创建，还是稍后创建它们。

Answer 3

注意：生活已经贬值!!这是如何在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>

Answer 4

尝试：

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

创建元素和事件（单击）

4 个答案: