Bootstrap modal无法显示按钮动态更新的data-url值该如何修复？

问题原因 #

jQuery的.data()方法会在首次读取DOM元素的data-*属性时，将值缓存到jQuery内部的存储对象中，后续再次调用.data()获取同一个属性时，会直接读取缓存值，不会再同步读取DOM元素上的实际属性。你用.attr()更新的是DOM元素的data-url属性，并没有更新jQuery的内部缓存，所以modal第一次读取后，后续拿到的都是首次缓存的旧值。

两种修复方案任选其一即可： #

方案1：更新属性时统一使用.data()方法

直接修改更新按钮属性的逻辑，用.data()而非.attr()，确保更新的内容同步到jQuery缓存中：

$('.js-url-check').on('change', function() {
  // 用data方法更新，同步修改jQuery缓存
  $('.js-url-btn').data('url', this.value);
});

$('#exampleModal').on('show.bs.modal', function(e) {
  var button = $(e.relatedTarget);
  var modalBody = $(this).find('.modal-body');
  modalBody.html(button.data('url'));
});

方案2：读取属性时直接获取DOM属性

不使用.data()方法读取，直接用.attr()获取DOM上的最新属性值，绕过jQuery的缓存机制：

$('.js-url-check').on('change', function() {
  $('.js-url-btn').attr('data-url', this.value);
});

$('#exampleModal').on('show.bs.modal', function(e) {
  var button = $(e.relatedTarget);
  var modalBody = $(this).find('.modal-body');
  // 直接读取DOM上的data-url属性，每次都能拿到最新值
  modalBody.html(button.attr('data-url'));
});

内容的提问来源于stack exchange，提问作者ConsoleLog