Question

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

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

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

我有一个show事件，它会提取day div的id并设置请求div的id，它可以正常工作。

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

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

这是我的问题：在Bootstrap 2x中，我将取消绑定click事件，并重新绑定到新的单击事件。

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

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

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

我还尝试保留bind / unbind代码，但是，看起来我需要删除模态数据切换，因为它现在在请求日期后显示两个对话框。

我显然错过了什么。

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

Answer 1

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

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

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

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

然后设置新的css和目标

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

然后将click事件绑定到新函数以显示dialog2

dateElement.bind('click', PromptDialog2Function);

Answer 2

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

<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>

如何动态更改bootstrap模态数据 - 目标点击

2 个答案: