使用 jQuery Selectable 在鼠标释放时打开引导模式

Question

我正在使用 jquery-selectable 来选择多个表格单元格。每个表格单元格都有一个 data-date 属性，每个单元格都有一个日期。在使用模式窗口中的数据日期值进行选择后，我想打开一个引导模式窗口。这是我目前正在使用的 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-date 不显示的问题是 data() 选择器不需要 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 或工作示例，以便我仔细看看吗？