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

Question

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