关闭时从 bootstrap 模态获取数据

Question

如果单击输入元素，我会打开一个模式。用户应该在模式中选择一些数据。关闭时，所选数据应显示在触发点击事件的元素中。

<!-- input elements -->
    <div class="wrapper">    
    <div class="row align-items-center mb-2 mt-2 ms-1 "> 
        <input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
        <input class="form-control" type="text"  name="txtNr2[]">
        <input class="form-control" type="text"  name="txtNr3[]" value="3">
        <a href="javascript:void(0);" class="add_button" title="add"><img src="../img/add-icon.png" alt="Add"></a>
    </div>      

    <div class="row align-items-center mb-2 mt-2 ms-1 "> 
        <input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
        <input class="form-control" type="text"  name="txtNr2[]">
        <input class="form-control" type="text"  name="txtNr3[]" value="3">            
    </div>      

    <div class="row align-items-center mb-2 mt-2 ms-1 "> 
        <input type="text" id="txtMittel[]" name="txtNr1[]" class="form-control openmodal" placeholder="input" >
        <input class="form-control" type="text"  name="txtNr2[]">
        <input class="form-control" type="text"  name="txtNr3[]" value="3">            
    </div>      
</div>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                 <h5 class="modal-title" id="modalTitle">Modal title</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="divModalBody">
                 <input type="text" id="txtUserInput">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
        </div>
    </div>
<script>
$("#wrapper").on('click', '.openmodal', function(e){
    $("#modal").modal("show");        
    $("#btnCloseModal").on('click', function() {                     
        e.target.value = $("#txtUserInput").val();
        $(e.target).parent().next().children().val("some other text from the modal");
    });
}); </script>

如果我使用 e.target.value 一开始似乎可以工作，但是如果单击 class .example 的更多元素，则之前单击的所有元素的值，也改了

Answer 1

您每次显示对话框时都会创建一个新的“关闭”事件处理程序，但在隐藏对话框时不会删除它们。因此，在关闭时，除了当前的新处理程序之外，所有旧处理程序都会被触发。

有两种选择：

删除触发时的“关闭”处理程序：

$("#wrapper").on('click', '.openmodal', function(e){
    $("#modal").modal("show");        
    $("#btnCloseModal").on('click', function() {
        $("#btnCloseModel").off('click');
        e.target.value = $("#txtUserInput").val();
        $(e.target).parent().next().children().val("some other text from the modal");
    });
});

声明一次关闭处理程序并通过外部变量传递所需的数据：

let wrapperTarget;
$("#wrapper").on('click', '.openmodal', function(e){
    wrapperTarget = e.target;
    $("#modal").modal("show");
});
$("#btnCloseModal").on('click', function() {
    wrapperTarget.value = $("#txtUserInput").val();
    $(wrapperTarget).parent().next().children().val("some other text from the modal");
});

关闭时从 bootstrap 模态获取数据

get data from bootstrap modal on close

javascript

jquery

bootstrap-modal