jquery在页面加载完成后再append的元素事件无效问题


最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件。就如:

<ul class="content"></ul>
<span class="test">测试</span>
<script type="text/javascript">
$(function() {
      $('.test').click(function() {
          $('.content').append('<li>keso</li>');
      });

    $('.content li').click(function(event) {
      console.log('博客园');
    });

});
</script>

在append添加的<li>keso</li>上点击控制台就是不输出“博客园”,也就是$('.content li').click(function(event) {console.log('博客园');});根本没有执行。

找了好久才把这个问题解决了。方法如下:

<ul class="content"></ul>
<span class="test">测试</span>
<script type="text/javascript">
$(function() {
      $('.test').click(function() {
          $('.content').append('<li>keso</li>');
      });
    $('.content li').click(function(event) {
      console.log('博客园');
    });
      $(document).on('click', '.content li', function() {
          console.log('keso');
      });
});
</script>

就是用 on()方法就解决了

$(document).on('click', '.content li', function() {
          console.log('keso');
      });


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2024 CODEPRJ.COM