如何在jquery中使用动态生成的按钮打开模式

Question

Snapshot of html

如上图所示，用户可以通过点击加号按钮来添加输入字段。每当用户点击它时，额外的字段将被添加到从 jquery 动态生成的表单中。不，我想弹出一个带有 id ins-company-notes-1、ins-company-notes-2、ins-company-notes-3.. 的附加注释按钮的模式。任何人都可以帮助我如何做到这一点

-- 脚本

$(document).ready(function(){

    var max_fields = 5;
    var field_wrapper = $(".insurance-check-form");
    var discharge_field_wrapper = $(".discharge-insurance-form");
    var add_button = $("#add-more");
    var ins_company_count = 2;
    var dis_ins_company_count = 2;
    var adm_ins_id_count = 1;
    var dis_ins_id_count = 1;

    $(document).on("click","#add-more",(function(e){
        e.preventDefault();
        if(ins_company_count < max_fields){
            $(field_wrapper).append(' <div class="row mt-5 company-box"> <div class="col-md-3 mt-3"> <select name="insurance" class="custom-select"> <option selected>Select Insurance Company</option> <option value="icci">ICCI Prudential</option> <option value="star">Star Health Insurance</option> <option value="edelwiss">Edelwiss Tokyo</option> </select> </div><div class="col-md-2 text-center"> <div class="head4 bold">Additional notes</div> <button class="btn btn-link" id="ins-company-notes-'+ins_company_count+'" type="button"> <i class="far fa-file-alt head2 text-gray"></i></button> </div><div class="col-md-2"> <span class="head4 bold">Click here to Submit</span> <div class="material-switch pull-right"> <input id="ins-company-submit-'+ins_company_count+'" name="someSwitchOption001" type="checkbox"/> <label for="ins-company-submit-'+ins_company_count+'" class="label-primary"></label> </div></div><div class="col-md-2"> <span class="head4 bold">Click here to Approve</span> <div class="material-switch pull-  right"> <input id="ins-company-approval-'+ins_company_count+'" name="someSwitchOption002" type="checkbox"/> <label for="ins-company-approval-'+ins_company_count+'" class="label-success"></label> </div></div><div class="col-md-2"> <span class="head4 bold">Click here to Deny</span> <div class="material-switch pull-right"> <input id="ins-company-deny-'+ins_company_count+'" name="someSwitchOption003" type="checkbox"/> <label for="ins-company-deny-'+ins_company_count+'" class="label-danger"></label> </div></div><a href="#" class="remove_field"><i class="fas fa-times-circle brand-color head2 mt-4 text-center"></i></a></div>');
            ins_company_count++;
        }
        else{
            alert("Sorry !! You exceeded the maximum limit.")
        }
    }))

    $(field_wrapper).on("click",".remove_field", function(e){
        e.preventDefault();
        $(this).parent('div').remove();
        ins_company_count--;
    });

    $("#ins-company-submit-1").change(function(){
        $(this).prop("checked") ?  $("#ins-company-approval-1").removeAttr("disabled") && $("#ins-company-deny-1").removeAttr("disabled") && $(this).attr("disabled", true) : "";
    });

    $("#ins-company-approval-1").change(function(){
        if($(this).prop("checked") && $("#ins-company-deny-1").prop("checked")){
            $("#justificationmodal").modal();
            $("#ins-company-deny-1").prop("checked", false);
        };
    });

    $("#ins-company-deny-1").change(function(){
        $("#justificationmodal").modal();
        $(this).prop("checked") ? $("#ins-company-approval-1").prop("checked", false) :"";
    });

    $("#ins-company-notes-1").click(function(){
        $("#additionalnotes").modal();
    });
});

-- html

<form>
    <div class="insurance-check-form">
        <div class="row mt-3 company-box">
            <div class="col-md-3 mt-3">
                <select name="insurance" class="custom-select">
                    <option selected>Custom Select Menu</option>
                    <option value="volvo">ICCI Prudential</option>
                    <option value="fiat">Blue Star</option>
                    <option value="audi">Edelwiss Tokyo</option>
                </select>
            </div>
            <div class="col-md-2 text-center">
                <div class="head4 bold">Additional notes</div>
                <span class="head3" data-toggle="popover" data-trigger="hover" data-content="Click here to add a notes">
                <button class="btn btn-link" id="ins-company-notes-1" type="button">
                <i class="far fa-file-alt head2 text-gray"></i></button>
            </div>
            <div class="col-md-2">
                <span class="head4 bold">Click here to Submit</span>                                                                                                
                <div class="material-switch pull-right">                                                                                                 
                    <input id="ins-company-submit-1" name="someSwitchOption001" type="checkbox"/>
                    <label for="ins-company-submit-1" class="label-primary"></label>            
                </div>
            </div>
            <div class="col-md-2">
                <span class="head4 bold">Click here to Approve</span>  
                <div class="material-switch pull-right">
                    <input id="ins-company-approval-1" name="someSwitchOption002" type="checkbox" disabled/>
                    <label for="ins-company-approval-1" class="label-success"></label>            
                </div>
            </div>
            <div class="col-md-2">
                <span class="head4 bold">Click here to Deny</span>  
                <div class="material-switch pull-right">
                    <input id="ins-company-deny-1" name="someSwitchOption003" type="checkbox" disabled/>
                    <label for="ins-company-deny-1" class="label-danger"></label>            
                </div>
            </div>
        </div>
    </div>
</form>

-- 模态

<div class="modal fade" id="additionalnotes">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header text-center">
                <h4 class="modal-title bold">Additional Notes </h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <form>
                    <div class="form-group">                                       
                        <textarea class="form-control" rows="5" id="comment" name="text" placeholder="Some text here" required></textarea>
                    </div>
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">                 
            <button type="button" class="btn btn-info" data-dismiss="modal"  data-backdrop="static" data-keyboard="false">Done</button>                              
            </div>
            </form>
        </div>
    </div>
</div>

Answer 1

试试documenton, off

$(document).off('click', '#ins-company-notes-1');
$(document).on('click', '#ins-company-notes-1', function () {
   $("#additionalnotes").modal();
})

或

$(document).on("click","#add-more",(function(e){
   e.preventDefault();
     if(ins_company_count < max_fields){

        }
        else{
          alert("Sorry !! You exceeded the maximum limit.")
         }/***Add Here Your Fuction***/
       $("#ins-company-notes-1").click(function(){           
          $("#additionalnotes").modal();
      })
    }))