在 Jquery ui 手风琴工作中动态添加内容

Question

所以我有这个手风琴代码，它有三个输入字段和两个按钮

  <div id="accordion">
                <h3>External Attendees</h3>
                <div>

                    <div class="invitediv">
                        <div class="form-row  invitepeople">

                            <div class="col-3">

                                <input type="text" class="form-control inmail" placeholder="Email" />
                            </div>

                            <div class="col-3">

                                <input type="text" class="form-control inname" id="extname" placeholder="Name" />

                            </div>
                            <div class="col-3">

                                <input type="text" class="form-control incnt" placeholder="Mobile No" />

                            </div>
                            <div class="col-1">
                                <input type="button" id="reminvt" onclick="removeDiv(this);" class="btn btn-danger reminvt" value="-" />

                            </div>

                            <div class="col-1">
                                <input type="button" id="addinvt" class="btn btn-success" value="+" />

                            </div>
                        </div>

                    </div>

                </div>
</div>

单击此按钮时调用此方法

 $("#addinvt").on("click", function (e) {
            debugger;

           
            e.preventDefault();
            var data ='</br> <div class="form-row  invitepeople" >'+

              '  <div class="col-3">'+

                   ' <input type="text" class="form-control inmail" placeholder="Email" />'+
               ' </div>'+

                '<div class="col-3">'+

                   ' <input type="text" class="form-control inname" id="extname" placeholder="Name" />'+

               ' </div>'+
                '<div class="col-3">'+

                    '<input type="text" class="form-control incnt" placeholder="Mobile No" />'+

                '</div>'+
                '<div class="col-1">'+
                   ' <input type="button" id="reminvt" onclick="removeDiv(this);" class="btn btn-danger reminvt" value="-" />'+

                '</div>'+

                '<div class="col-1">'+
                    '<input type="button" id="addinvt" class="btn btn-success" value="+" />'+

                '</div>'+
            '</div>'
            $(".invitediv").append(data);

        });

并将 HTML 附加到手风琴内的 div，所以我的问题是 + 按钮仅适用于手风琴内已经存在的元素，我可以使用它添加新输入，但新添加元素的 + 按钮不会不行，这是怎么回事？ 有人可以解释一下吗？

Answer 1

尝试为每个按钮提供一个唯一的 id，我在这里通过这样做<input type="button" id="addinvt" class="btn btn-success" onclick="addDiv(this);" value="+" /> <input type="button" id="addinvt" class="btn btn-success" onclick="addDiv(this);" value="+" />

在这里， var elemtnCount = document.querySelectorAll('.invitepeople').length; 首先，我检查了您已经拥有的元素数量，然后将其递增以生成新密钥，然后将其与 ID 属性一起添加以生成唯一 ID。

并为每次添加（+）按钮单击使用一个函数。 因此，您的按钮将是独一无二的，并且每次单击都会添加按钮。

注意：这里我只对添加按钮进行了更改，对 remove(-) 按钮执行相同操作。

 function addDiv(e) { debugger; var elemtnCount = document.querySelectorAll('.invitepeople').length; var newElemCount = elemtnCount + 1; var data ='</br> <div class="form-row invitepeople" >'+ ' <div class="col-3">'+ ' <input type="text" class="form-control inmail" placeholder="Email" />'+ ' </div>'+ '<div class="col-3">'+ ' <input type="text" class="form-control inname" id="extname" placeholder="Name" />'+ ' </div>'+ '<div class="col-3">'+ '<input type="text" class="form-control incnt" placeholder="Mobile No" />'+ '</div>'+ '<div class="col-1">'+ ' <input type="button" id="reminvt" onclick="removeDiv(this);" class="btn btn-danger reminvt" value="-" />'+ '</div>'+ '<div class="col-1">'+ '<input type="button" id="addinvt'+(newElemCount)+' " class="btn btn-success" onclick="addDiv(this);" value="+" />'+ '</div>'+ '</div>' $(".invitediv").append(data); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="accordion"> <h3>External Attendees</h3> <div> <div class="invitediv"> <div class="form-row invitepeople"> <div class="col-3"> <input type="text" class="form-control inmail" placeholder="Email" /> </div> <div class="col-3"> <input type="text" class="form-control inname" id="extname" placeholder="Name" /> </div> <div class="col-3"> <input type="text" class="form-control incnt" placeholder="Mobile No" /> </div> <div class="col-1"> <input type="button" id="reminvt" onclick="removeDiv(this);" class="btn btn-danger reminvt" value="-" /> </div> <div class="col-1"> <input type="button" id="addinvt" class="btn btn-success" onclick="addDiv(this);" value="+" /> </div> </div> </div> </div> </div>