Question

我使用jquery-selectable选择多个表格单元格。每个表格单元格都有一个data-date属性，每个单元格都有一个日期。在使用模态窗口中的data-date值进行选择后，我想打开一个bootstrap模态窗口。这是我正在使用的HTML和我到目前为止的jQuery代码：

<tr class="selectable">
    <th class="user-blue">J. Doe 123456</th>
    <td class="ui-state-default" data-date="12-12-2015" data-toggle="modal" data-target="#myModal">12</td>
    <td class="ui-state-default" data-date="12-23-2015" data-toggle="modal" data-target="#myModal">12</td>
    <td class="ui-state-default" data-date="1-02-2016" data-toggle="modal" data-target="#myModal">24</td>
    <td class="ui-state-default" data-date="1-12-2016" data-toggle="modal" data-target="#myModal">24</td>
    <td class="ui-state-default" data-date="12-11-2015" data-toggle="modal" data-target="#myModal">N/A</td>
    etc...
</tr>

到目前为止这是javascript：

$(function() {
    $( ".selectable" ).selectable();
  });

$(function(){
    $('#myModal').modal({
        keyboard: true,
        backdrop: "static",
        show:false,
    }).on('show', function(){ //subscribe to show method
        var date = $(event.target).closest('td').data('data-date');
        $(this).find('.modal-body').html($('<b>dates selected: ' + date  + '</b>'))
    });
});

以下是jsFiddle网址http://jsfiddle.net/jeffcc/uwb6pbpk/

问题是，在我选择了几个单元格之后，模式根本没有打开，第二个，因为我没有能够达到足够远，我无法显示数据 - 日期值。

在我选择了几个单元格后，如何才能打开模态？

Answer 1

数据日期未显示的问题是data（）选择器不需要数据前缀，因此以下内容适用于此：

    var date = $(event.target).closest('td').data('date');

并且它无法正确显示的问题可能是你正在初始化模态两次，一次通常由数据标签然后自己完成。尝试：

$('#myModal').on('show', function(){ //subscribe to show method
    var date = $(event.target).closest('td').data('data-date');
    $(this).find('.modal-body').html($('<b>dates selected: ' + date  + '</b>'))
});

你有一个jsfiddle或工作示例，所以我可以仔细看看吗？

使用jQuery Selectable在鼠标发布时打开Bootstrap模式

1 个答案: