yyy_jjj
yyy_jjj
采纳率40%
2020-03-30 12:29 阅读 687

Jquery动态生成的按钮向动态生成的<div>中添加元素无效。

跪求大佬帮帮忙,看看我是哪里写得不对。页面上有输入框输入数字,点击按钮生成相应数量的章代码块;每块章节中有输入框输入数字,点击按钮生成相应数量的节代码块;生成章没问题,但生成节的按钮无效。按钮id与存放节信息的 div 容器都是动态生成的。

html

<div id="chapterContainer">
<!-- 存放章节信息 -->
</div>

jquery部分

//添加章
$(document).ready(function () {
       $("#createChapter").click(function () {
              var num = $('#chapterNum').val();
              var html="<div class=\"sub-title\">章节信息</div>";
              for(var i=1;i<=num;i++){
                    html += "<div class=\"row\" id=\"cdiv"+i+"\">\n" +
                            "    <div class=\"panel panel-default\">\n" +
                            "        <div class=\"panel-heading\">章序号:"+i+"</div>\n" +
                            "        <div class=\"panel-body\">\n" +
                            ……………………………………
                                                        ……………………………………
                            "                <div class=\"form-group\">\n" +
                            "                    <label class=\"col-sm-1 control-label\">节数目:</label>\n" +
                            "                    _**<div class=\"col-sm-2\">\n" +
                            "                        <input type=\"text\" class=\"form-control\" id=\"sectionNum"+i+"\" name=\"chapterNum"+i+"\" placeholder=\"输入节数目\">\n" +
                            "                    </div>\n" +
                            "                    <div class=\"col-sm-2\">\n" +
                            "                        <button class=\"btn btn-warning\" type=\"button\" id=\"createSection_"+i+"\">添加节</button>\n" +_**
                            "                    </div>\n" +
                            "                    <div class=\"col-sm-2\">\n" +
                            "                        <button type=\"button\" class=\"btn btn-danger\" id=\"deleteChapter_"+i+"\">删除章</button>\n" +
                            "                    </div>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "           **_ <div class=\"row\" id=\"sectionsRow"+i+"\">\n" +//存放节信息
                            "            </div>\n" +**_
                            "        </div>\n" +
                            "    </div>\n" +
                            "</div>"
                }
                $('#chapterContainer').empty().append(html,);
            });
        })

添加节(此处无效)

$(function (){
            $( "button[id^='createSection_']" ).each( function(){//获取所有的id为createSection_开头的Button
                // var chids = $(this).attr( "id");//获取它的id属性值
                // var arr = chids.split("_" );
                // var chid = arr[2];
                $("#chapterContainer").on('click',this ,function(){//绑定当前点击的按钮
                    var chids = $(this).attr( "id");//获取它的id属性值
                    var arr = chids.split("_" );
                    var chid = arr[2];
                    var numid = 'sectionNum'+chid;
                    var num = $("#"+numid+"").val();
                    var containerid = 'sectionsRow'+chid;
                    var html = "";
                    for(var i=1;i<=num;i++){
                        html += "<div class=\"col-sm-4\" id=\"div"+chid+i+"\">\n" +
                            "        <div class=\"panel panel-default\">\n" +
                            "             <div class=\"panel-body\">\n" +
                            "                 <div class=\"form-group\">\n" +
                            "                     <label class=\"col-sm-2 control-label\">序号</label>\n" +
                            "                     <div class=\"col-sm-4\">\n" +
                            "                         <input type=\"text\" class=\"form-control\"  name=\"sectionSort"+i+"\" placeholder=\"输入节序号\">\n" +
                            "                     </div>\n" +
                            "                     <div class=\"col-sm-2\">\n" +
                            "                         <button class=\"btn btn-danger\" type=\"button\" id=\"deleteSection"+chid+i+"\">删除节</button>\n" +
                            "                     </div>\n"+
                            "                 </div>\n" +
                            "                 <div class=\"form-group\">\n" +
                            "                     <label class=\"col-sm-2 control-label\">名称</label>\n" +
                            "                     <div class=\"col-sm-10\">\n" +
                            "                         <input type=\"text\" class=\"form-control\" name=\"newsname"+i+"\" placeholder=\"输入节名称\">\n" +
                            "                     </div>\n" +
                            "                 </div>\n" +
                            "                 <div class=\"form-group\">\n" +
                            "                     <label class=\"col-sm-2 control-label\">链接</label>\n" +
                            "                     <div class=\"col-sm-10\">\n" +
                            "                         <input type=\"text\" rows=\"3\" class=\"form-control\" name=\"newslink"+i+"\" placeholder=\"输入视频链接\">\n" +
                            "                     </div>\n" +
                            "                 </div>\n" +
                            "             </div>\n" +
                            "         </div>\n" +
                            "     </div>"
                    }
                    $("#"+containerid+"").append(html);
                });
            });
        });
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    franzhong franzhong 2020-03-30 13:16

    应该是后添加的元素没有被检测到造成的。
    http://snowcoal.com/article/703.html

    图片说明

    点赞 评论 复制链接分享

相关推荐