javascript - 原生Dom结构有用，append添加的dom结构无用

问题描述

问 题

html

   <li class='tree-empty'>
       <div class='input-moment-name'>
          <input placeholder='输入分类名称' />
          <button id='js-add-li' class='TextBtn'>确定</button>
       </div>
   </li>

javascript

    $('.moment-btn .add').click(function(){
        $('.my-define-moment').append("<li class='tree-empty'><div class='input-moment-name'><input placeholder='输入分类名称' /><button id='js-add-li' class='TextBtn'>确定</button></div></li>");
    });

    $('#js-add-li').click(function(){
        var momentName = $(this).parent().children('input').val();
    $('.my-define-moment').append("<li class='tree-empty'><span class='tree-third-items'>"+ momentName +"</span></li>");
    });

    $('body').on('click', '#js-add-li', function() {
        $(this).parent('.input-moment-name').remove();
    });

点击确定按钮，出现输入框，输入字符后点击确定，添加一个li。如果把结构写进html有用
但是，如果通过append添加的就无法完成第二个项，添加li，而且在两种情况下，点击输入框输入字符时，报错：event is not defined，不点击输入框不报错。

解决方案

$(".container").on("click", ".selector", function(event) {
    // ...
}

这篇关于javascript - 原生Dom结构有用，append添加的dom结构无用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！