Rails 5中Bootstrap模态框复用旧内容问题求助

嘿，这个问题我做项目时也踩过类似的坑！核心原因是你的JQuery hover事件只在找到.media-link元素时赋值，却没处理无link的.media项被hover时清空内容的情况，再加上模态框复用同一个DOM容器，之前的内容就残留下来了。

问题分析 #

当你hover带有link的模态框（窗口2）时，$("#media-modal-link")被填充了链接内容；之后hover无link的窗口1，因为.media里根本没有.media-link元素，$(this).find(".media-link").html()会返回undefined，而JQuery的html(undefined)不会清空现有内容，所以窗口2的链接就留在模态框里了——哪怕你控制台确认link.present?是false也没用，因为DOM里的内容没被重置。

解决思路&代码修改 #

1. 完善hover事件：无link时主动清空内容

修改你的JQuery代码，确保不管有没有.media-link，都给模态框容器赋值（空字符串或实际链接）：

$(".media").hover(function(){
  // 找不到.media-link时，用空字符串替代undefined
  var thisLink = $(this).find(".media-link").html() || "";
  $("#media-modal-link").html(thisLink);
});

2. （更稳妥）结合模态框打开/关闭事件处理

有时候用户可能直接点击打开模态框，没触发hover事件，或者关闭后残留内容，这时候可以配合Bootstrap模态框的事件做双重保障：

• 打开模态框时，同步对应内容：

  $(".media").on("click", function(){
    var thisLink = $(this).find(".media-link").html() || "";
    $("#media-modal-link").html(thisLink);
    // 这里写打开模态框的代码，比如：
    // $('#media-modal').modal('show');
  });
  

• 关闭模态框时清空内容，彻底避免残留：

  $('#media-modal').on('hidden.bs.modal', function () {
    $("#media-modal-link").html("");
  });
  

为什么这样有效？ #

• 第一种方法确保每次hover都覆盖容器内容，无link时就清空；
• 第二种方法从模态框的生命周期入手，打开时填充对应内容，关闭时重置，彻底切断内容残留的可能。

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