Question

我的代码在这里：https://jsfiddle.net/q387b96x/5/

单击按钮以打开模式
输入文字
点击保存
单击任何其他按钮，将显示您之前输入的相同值。

我希望模式显示其单击的特定行的“数据文本”属性。我想我也需要在保存时更新该属性？

我认为原因是文本未正确加载到模式中。我认为这是令人讨厌的代码：

$('#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
         });
     });

Answer 1

问题是因为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...')
});

Updated fiddle

模态textarea不会从其单击的按钮上加载数据属性

1 个答案: