创建元素和事件(单击)

时间:2013-03-27 14:10:05

标签: javascript jquery asp.net

我的代码:

<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 个答案:

答案 0 :(得分:2)

因为加载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/

答案 1 :(得分:1)

试试这个:

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

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

答案 2 :(得分: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>

答案 3 :(得分:-1)

尝试:

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