如何动态更改按钮提交的引导程序4模态数据

Question

民间 我正在使用bootstrap 4 madal。

用例是用户单击“编辑”按钮，它将当前数据（来自数据库）发送到模态。用户编辑模式并提交，这将调用js函数来更新数据库。 如果刷新页面，则没有问题，但是我不想这样做，因为大多数数据都是通过向下滚动动态添加的。然后刷新页面会将用户带回到顶部。因此，尽管我使用jquery来更新数据库并仅动态地更新表单数据，所以用户可以继续站立。

我有一个按钮，它基本上以可编辑的形式启动模态并将数据标题发送到模态

<button type="button" id="btn1" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-title="Post 1">Edit</button>

模态输入如下

<form>
<input type="text" class="form-control" id="title" name="title">
<button type="button" class="btn btn-primary" onClick="edit(this.form)">Submit</button>
</form>

此模态当然会通过引导程序4提供的解决方案来接收数据

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) 
  var recipient = button.data('title')
  var modal = $(this)
  modal.find('.modal-body input#title').val(recipient)
})

用户更新该字段并将更改发送给编辑功能

function edit(form){
  var title = form.title.value;
  ////// insert into database
  var btn1 = document.getElementById("btn1");
  btn1.setAttribute( 'data-title' ,form.title.value );
  alert(title);
}

现在您可以看到，插入数据后，该函数将根据用户将“数据标题”更新为新添加的值。我可以在“检查元素”中看到这一点。...

问题
但是，每次重复执行同一操作都会发送旧数据

例如 可以说来自数据库的数据是“ Post 1”

如您所见，值是

现在，用户将其更改为“发布2”，然后单击“提交”

现在这是新值

这一切都很好，但是，如果说用户再次单击“编辑”按钮，则理论上应将为“数据标题”设置的新值发送给模态，但模态会返回相同的旧“ Post-1” < / p>

我在网上搜索，显然我需要为“ show.bs.modal”设置一些内容并清除表单，但没有一个起作用。

我想念什么。 这是codepen

https://codepen.io/ozzie6935/pen/bQpmjY

Answer 1

jQuery .data方法正在从jQuery的数据对象中检索缓存的data-属性（请参阅this），这意味着当您更改相应的DOM元素属性时，它们将不会被更新。请改用.attr()。

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) 
  var recipient = button.attr('data-title')
  var modal = $(this)
  modal.find('.modal-body input#title').val(recipient)
})

这里是您的updated codepen。