Модальная текстовая область не загружает атрибут данных с кнопки, на которой он был нажат - PullRequest
Новая
       7

Модальная текстовая область не загружает атрибут данных с кнопки, на которой он был нажат

0 голосов
/ 09 июля 2019

Мой код здесь: https://jsfiddle.net/q387b96x/5/

  1. Нажмите кнопку, чтобы открыть модальный
  2. Введите текст
  3. Нажмите сохранить
  4. Нажмите любую другую кнопку, появится то же значение, которое вы ввели ранее.

Я хочу, чтобы модал показывал атрибут «data-text» для конкретной строки, по которой он щелкнул.Я думаю, мне нужно обновить этот атрибут при сохранении?

Я предполагаю, что причина в том, что текст не загружен в модальный правильно.Я предполагаю, что это оскорбительный код: 

$('#commentModal').on('show.bs.modal', function (e) {
         var text = $(e.relatedTarget).data('text');
         $('#textareaID').text(text);
         $('#btnSave').click( function () {
             //code to update in DB here
         });
     });

1 Ответ

0 голосов
/ 09 июля 2019

Проблема в том, что Bootstrap повторно использует тот же модальный HTML. Чтобы устранить проблему, вы можете просто очистить значение textarea, когда модальное скрыто.

Также обратите внимание, что необходимо использовать val() для установки значения в элементе textarea, а не text(), и обработчик нажатия #Save будет лучше в качестве делегированного события. Попробуйте это: 

$('#commentModal').on({
  'shown.bs.modal': function(e) {
    var text = $(e.relatedTarget).data('text');
    $(this).find('#textareaID').val(text);
  },
  'hide.bs.modal': function(e) {
    $('#textareaID').val('');
  }
});

$(document).on('click', '#btnSave', function() {
    console.log('TODO: Implement save logic...')
});

Обновленная скрипка

...