如何动态更改引导模式数据目标点击

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 中，我会取消绑定点击事件，然后重新绑定到新的点击事件。

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

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

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

我也尝试保留绑定/取消绑定代码，但是，我似乎需要删除模式数据切换，因为现在它在请求日期后显示两个对话框。

我显然错过了什么。

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

Answer 1

在我下面的简单代码中，下拉列表决定了将显示哪个对话框

<select onchange="$('#btn').data('target', this.value)">
<option value="#dlg1">Dialog 1</option>
<option value="#dlg2">Dialog 2</option>
</select>
<button id="btn" data-target="#dlg1" onclick="$($(this).data('target')).modal('show');">
    Show Dialog
</button>

Answer 2

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

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

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

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

然后设置新的css和target

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

然后将点击事件绑定到一个新的函数来显示dialog2

dateElement.bind('click', PromptDialog2Function);