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

Question

html

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，不点击输入框不报错。

Answer 1

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