Блог

Есть 5 кнопок, запускающих модальный параметр. В модальном режиме вводится строка, которая затем устанавливается в качестве текста для соответствующей кнопки, то есть кнопки, которая ее запустила.

Я использовал event.relatedTarget и смог получить доступ к соответствующей кнопке. Это сработало в первый раз, но со второй попытки (нажатие другой кнопки для запуска модального) событие.relatedTarget учитывало обе кнопки. И в третий раз потребовались все три и так далее.

Есть ли какой-либо способ сбросить это отображение в любом случае?

Вот мой модальный объект, созданный динамически на JavaScript:

 '<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">amp;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();
                    }
                });
            });
        }