动态生成多行样式，每个样式中都有编辑按钮，点击样式中编辑按钮并提交，发现只有最后一个样式中能展示对应的编辑内容，这是为啥？

Question

如图，当我点击下图中的新建分组，动态生成“ddaa”,"aa"，"dw"这几个div，每行div都包含文本、编辑和删除按钮，点击编辑按钮（右边第一个小图标），弹出一个编辑提示窗，编辑完成后内容会重新显示在原来的位置，但是只有最后一个“dw”能显示正常的编辑后的内容，其他的编辑后还是原来的内容，经过打印发现获取不到编辑框的val()，但是最后一个编辑框却能获取到，这是为什么啦？
代码：
$('.server-subgroup-u-edit').click(function () {

                // 编辑分组弹窗
                $("body").append(
                    "<div class='show-lay'><div class='show-edit-ground'>" +
                    "<p class='show-edit-ground-title'>编辑分组</p><div class='show-edit-dv'>" +
                    "<form><input type='text' placeholder='请输入新的组名' maxlength='8' class='show-edit-ipt edit_subgroup_inp'></form></div><div class='show-edit-btn'>" +
                    "<button class='edit-affirm-win'>确定</button><button class='show-edit-cancel'>取消</button></div></div></div>"
                );
                var edit_subgroup_index=$(this).parent().parent().index();
                var edit_subgroup_name=$('.server-subgroup').find('div').eq(edit_subgroup_index).find('p').eq(0).html();

                $('.edit_subgroup_inp').val(edit_subgroup_name);
                $('.edit-affirm-win').click(function () {
                    if($('.edit_subgroup_inp').val()!='') {
                    $('.server-subgroup').find('div').eq(edit_subgroup_index).find('p').eq(0).html($('.edit_subgroup_inp').val());
                    console.log($('.edit_subgroup_inp').val(),12158);
                    $('.show-lay').remove();
                    }
                });

这是我这个功能的全部代码
$('.creat-ground-sp').click(function () {

        // 新建分组弹窗
        $("body").append(
            "<div class='show-lay'><div class='show-creat-ground'>" +
            "<p class='show-creat-ground-title'>新建分组</p><div class='show-creat-dv'>" +
            "<form action=''><input type='text' placeholder='请输入新建组名' maxlength='8' class='show-creat-ipt new-group-inp' autofocus></form></div><div class='show-creat-btn'>" +
            "<button class='show-creat-affirm'>确定</button><button class='show-creat-cancel'>取消</button></div></div></div>"
        );
        $('.show-creat-affirm').on('click',function () {
            if ($('.new-group-inp').val() != "") {
                $('.server-subgroup').append('<div class="server-subgroup-dv server-subgroup-active"><p>' + $('.new-group-inp').val() + '</p><p class="server-subgroup-icon"><i class="server-subgroup-u-edit"></i><i class="server-subgroup-u-delete"></i></p></div>');
                $('.show-lay').remove();
            }
            $('.server-subgroup-active').mouseenter(function () {

                $(this).find('i').eq(0).css('visibility','visible');
                $(this).find('i').eq(1).css('visibility','visible');
            });
            $('.server-subgroup-active').mouseleave(function () {
                $(this).find('i').eq(0).css('visibility','hidden');
                $(this).find('i').eq(1).css('visibility','hidden');
            });
            $(document).on('click','.server-subgroup-u-edit',function () {
                // 编辑分组弹窗
                $("body").append(
                    "<div class='show-lay'><div class='show-creat-ground'>" +
                    "<p class='show-creat-ground-title'>编辑分组</p><div class='show-creat-dv'>" +
                    "<form><input type='text' placeholder='请输入新的组名' maxlength='8' class='show-creat-ipt edit_subgroup_inp' autofocus></form></div><div class='show-creat-btn'>" +
                    "<button class='edit-affirm-win'>确定</button><button class='show-creat-cancel'>取消</button></div></div></div>"
                );
                var edit_subgroup_index=$(this).parent().parent().index();
                var edit_subgroup_name=$('.server-subgroup').find('div').eq(edit_subgroup_index).find('p').eq(0).html();
                
                $('.edit_subgroup_inp').val(edit_subgroup_name);
                $(document).on('click','.edit-affirm-win',function () {
                    // if($('.edit_subgroup_inp').val()!='') {
                        $('.server-subgroup').find('div').eq(edit_subgroup_index).find('p').eq(0).html($('.edit_subgroup_inp').val());
                        console.log($('.edit_subgroup_inp').val(),12158);
                        $('.show-lay').remove();
                    // }
                });
               $('.show-creat-cancel').on('click',function () {
                   $('.show-lay').remove();
               });
            });
            $('.server-subgroup-u-delete').click(function () {
                // 删除分组弹窗
                $('body').append(
                    "<div class='show-lay'>"+
                    "<div class='delete-group-win'>"+
                    "<div class='delete-group-main'>"+
                    "<p class='delete-group-text'>确定删除该分组吗</p>"+
                    "</div>"+
                    "<div class='delete-group-btn'>"+
                    "<button class='delete-affirm-win'>确认</button>"+
                    "<button class='delete-group-cancel'>取消</button>"+
                    "</div>"+
                    "</div>"+
                    "</div>"
                );
                var subgroup_delete_index=$(this).parent().parent().index();
                $('.delete-affirm-win').click(function () {
                    $('.server-subgroup').find('div').eq(subgroup_delete_index).remove();
                    $('.show-lay').remove();
                })
                $('.delete-group-cancel').click(function () {
                    $('.show-lay').remove();
                });
            });
        });
        $('.show-creat-cancel').click(function () {
            $('.show-lay').remove();
        });
    });

Answer 1

代码逻辑太乱.
编辑弹窗提出来, 没必要点击再去append, 点击show出来就行了.
同时点击一个按钮, 再去append一个div, 再给这个div里面的元素再绑定点击事件...
这种逻辑不好, 可读性低.

Answer 2

确实挺乱，不过append出来的东西，你不应该直接click,要这样才行：

$('body').on("click",".edit-affirm-win"，function () {

})
包括这个也是$('.server-subgroup-u-edit')

//QAQ我写错了，应该是楼下那样，改了下

Answer 3

因为你是动态加入的，所以用这个$(document).on('click','.edit-affirm-win',function(){});