引导模态相关目标

问题描述

有5个按钮触发模态。 在模式下，输入一个字符串，然后将其设置为相应按钮（即触发它的按钮）的文本。

我使用了event.relatedTarget并能够访问相应的按钮。 这是第一次工作，但第二次尝试（单击另一个按钮触发模式），event.relatedTarget考虑了两个按钮。第三遍，全部三个，以此类推。

反正有没有重置此映射的提示？

这是我用JavaScript动态制作的Modal：

'<div class="modal fade" id="editTitleModal" role="dialog">'+
                            '<div class="modal-dialog modal-lg">'+
                                '<div class="modal-content">'+
                                    '<div class="modal-header">'+
                                        '<h4 class="modal-title">Edit column label</h4>'+
                                        '<button type="button" class="close" data-dismiss="modal">&times;</button>'+
                                    '</div>'+
                                    '<div class="modal-body" style="padding: 2rem;">'+
                                        '<h6 class="mb-2">Select a field for this column</h6>'+

                                        "<select id='columnLabel' style='border: solid #000 0.1rem;' class='csv-select'>" +
                                            "<option class='select-none' value='select-none'>Select Value</option>";
                                            for (let i = 0; i < data.header.length; i += 1) {
                                                html = html + "<option value='" + data.header[i][0].toString().substr(0,30) + "'>"+ data.header[i][0].toString().substr(0,30) +"</option>";
                                            }
                                        html = html + "</select>"+
                                    '</div>'+

                                    '<div class="modal-footer">'+
                                        '<button type="button" style="width: 6rem; margin-left: 33rem;" class="blue-fill-btn" id="updateHeader">Confirm</button>'+
                                        '<button type="button" style="width: 6rem; margin-right: 2rem;" class="outline-stand-btn" id="closeModal" data-dismiss="modal">Close</button>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>';

这里是五个按钮中的一个，称为模式：

<td class='cellDesign btn' data-toggle='modal' onclick='sendToModal()' data-target='#editTitleModal'> data.header[i][0].toString().substr(0,30) </td>

这是javascript函数：

function sendToModal() {
            $('#editTitleModal').one('show.bs.modal',function (event) {
                $(document).on('click','#updateHeader',function () {
                    console.log(event.relatedTarget);
                    if ($('#columnLabel')[0].value != 'select-none') {
                        $(event.relatedTarget).html($('#columnLabel')[0].value);
                       $('#closeModal').click();
                    }
                });
            });
        }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）