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

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="+" />

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

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

注意：这里我只对添加按钮进行了更改，对删除（-）按钮进行了相同的更改。

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>