如何动态更改引导程序模态数据目标单击 [英] how to dynamically change bootstrap modal data-target click

问题描述

我有一个网站日历，其行为类似于预订请求.我在Bootstrap 2x中使用了此功能，但已将应用程序转换为3.0.一切似乎都正常，但是我试图找出如何动态更改数据目标的方法.

I have a website calendar which acts similar to a reservation request. I had this working in Bootstrap 2x but have converted the app to 3.0. Everything seems to be working, but I am trying to figure out how to dynamically change the data-target.

如果有日期可用，则日历中的日期可能如下所示:

If a date is available, a day in the calendar may look like this:

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

我有一个show事件，它提取day div的ID并设置正常工作的请求div的ID.

I have a show event that pulls the id of the day div and sets the id of the request div which works fine.

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

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

In this modal, a button sends a request for the date, and if successful, swaps the class of the div to show that the date has been requested.

这是我的问题:在Bootstrap 2x中，我将取消绑定click事件，然后重新绑定至新的click事件.

Here's my issue: In Bootstrap 2x I would unbind the click event, and rebind to a new click event.

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

In Bootstrap 3x I am trying to change the data target.

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

当我再次单击该日期时，我得到的是最初的请求"对话框#modalDialog1"，而不是#modalDialog2

When I click on this date again, I get the initial Request dialog "#modalDialog1" instead of #modalDialog2

我也尝试过保留绑定/取消绑定代码，但是，由于需要在请求日期后同时显示两个对话框，因此我似乎需要删除模式数据切换.

I have also tried keeping the bind/unbind code, however, it looks like I will need to remove the modal data-toggle as now it's showing both dialogs after requesting a date.

我显然丢失了一些东西.

I'm obviously missing something.

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

How can I dynamically change the data-target so that it will call the 2nd dialog?

推荐答案

我知道这很旧，所以我希望这都是正确的.

I know this is old, so I hope this is all correct.

我相信我已经通过从请求modalDialog1获取ID来获取上述date元素，从而解决了这一问题.

I believe I have solved this by getting the date element above by getting the id from the request modalDialog1.

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

If the request was successful, then the css and click event is altered.

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

然后设置新的CSS和目标

Then setting the new css and target

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

然后将click事件绑定到一个新功能以显示对话框2

Then binding the click event to the a new function to display dialog2

dateElement.bind('click', PromptDialog2Function);

这篇关于如何动态更改引导程序模态数据目标单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！