如何使用表格标题在可排序的 jQuery UI 手风琴中扩展可抓取区域答案

【问题标题】：How to extend grab-able area in Sortable jQuery UI Accordion with table header如何使用表格标题在可排序的 jQuery UI 手风琴中扩展可抓取区域
【发布时间】：2013-10-03 10:14:55
【问题描述】：

我有这个可排序的手风琴，标题中有一个表格。表格很简单：2 行 3 列，中间的列横跨两行，所以总共有 5 个元素。

在中心元素中我使用了一个输入元素：

<div id="accordion" 
     data-bind="jqAccordion: { },template: { name: 'task-template', foreach: ¨Tasks, afterAdd: function(elem){$(elem).trigger('valueChanged');} }">
</div>   

<script type="text/html" id="task-template">
    <div data-bind="attr: {'id': 'Task' + TaskId}, click: $root.SelectedTask" class="group">
        <div class="accordion-header">
            <table class="myAccordionHeader" >
                <tbody>
                    <tr>
                        <td class="left-upper" >
                            <label for="SequenceNo">Seq:</label>
                            <span data-bind="text: SequenceNo"></span>
                        </td>
                        <td class="center" rowspan="2" >
                            <h3><b><input name="TaskName" data-bind="value: TaskName" /></b></h3>
                        </td>
                        <td class="right-upper" colspan="2">
                            Due: <span data-bind="text: DueDate"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="left-bottom">
                            Id: <span data-bind="text: TaskId" ></span>
                        </td>
                        <td class="right-bottom">
                            Status: <span data-bind="text: TaskStatus"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="myAccordionContent">
            <!-- Contents here... -->
        </div>    
    </div>
</script>

在标题中引入表格后，我可以抓住手风琴标题的唯一位置是输入元素边距，并且在第三列开始之前位于它的一侧。

我认为这与表数据元素 (<td>s) 上的一些基本事件有关。其他<td>s 填充有文本和<span> 元素数据绑定与剔除变量。

关于如何扩大手风琴“可抓取”区域的任何线索？

【问题讨论】：

标签： jquery jquery-ui knockout.js jquery-ui-sortable jquery-ui-accordion

【解决方案1】：

原因是您将click 事件绑定到包含您的手风琴元素的 div。所以当你点击手风琴标题click 事件气泡到div

我看到的最简单的方法是添加另一个 dom 元素来绑定他$root.SelectedTask，像这样：

<div data-bind="attr: {'id': 'Task' + TaskId}" class="group">
    <a href="javascript:;" data-bind="click: $root.SelectedTask">Any text</a>
... another html....

试试这个，希望对你有帮助。

【讨论】：