0

我有这个可排序的手风琴，标题中有一个表格。该表很简单：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>元素，这些元素与剔除变量数据绑定。

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

4

1 回答 1

0

原因是您将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....

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

于 2013-09-27T13:50:59.757 回答