twitter-bootstrap - 如何动态更改 Bootstrap 模式数据目标单击

Question

我有一个类似于预订请求的网站日历。
我在 Bootstrap 2x 中工作，但已将应用程序转换为 3.0。一切似乎都在工作，但我试图弄清楚如何动态更改数据目标。

如果日期可用，日历中的一天可能如下所示:

<div id="20140226" data-id="20140226" class="NotRequested calDay" data-target="#modalDialog1" data-toggle="modal">26</div>

我有一个显示事件，它提取当天 div 的 id 并设置请求 div 的 id，它工作正常。

$('#modalDialog1').on('show.bs.modal', function (e) { 
    $(e.target).data("id", $(e.relatedTarget).data("id"));
}

在此模式中，按钮发送日期请求，如果成功，则交换 div 的类以显示已请求日期。

这是我的问题:
在 Bootstrap 2x 中，我将取消绑定(bind)点击事件，然后重新绑定(bind)到新的点击事件。

在 Bootstrap 3x 中，我试图更改数据目标。

dateElement.data("target", "#modalDialog2");

当我再次单击此日期时，我得到初始请求对话框“#modalDialog1”而不是#modalDialog2

我也尝试过保留绑定(bind)/取消绑定(bind)代码，但是，看起来我需要删除模态数据切换，因为现在它在请求日期后显示了两个对话框。

我显然错过了一些东西。

如何动态更改数据目标以便调用第二个对话框？

Answer 1

我知道这是旧的，所以我希望这一切都是正确的。

我相信我已经通过从请求modalDialog1获取id来获取上面的日期元素来解决这个问题。

如果请求成功，则更改 css 和 click 事件。

var dateElement = $("#" + $("#modalDialog1").data("id"));
dateElement.removeClass("NotReceived");
dateElement.unbind('click');

然后设置新的css和target

dateElement.addClass("Requested");
dateElement("target", "#modalDialog2");

然后将click事件绑定(bind)到一个新函数以显示dialog2

dateElement.bind('click', PromptDialog2Function);