Как расширить область захвата в Сортируемом jQuery UI Accordion с помощью заголовка таблицы

Question

Как расширить область захвата в Сортируемом jQuery UI Accordion с помощью заголовка таблицы

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> заполняются текстовыми и <span> элементами данных, связанными с переменными нокаутом.

Любая подсказка о том, как расширить "захватываемую" область для аккордеона?

Asle G 27 сен. 2013, в 10:13

Источник

Теги:

jquery

jquery-ui

jquery-ui-sortable

jquery-ui-accordion

knockout.js

1 ответ

Ещё вопросы

Andrey Nelubin · Answer 1 · 2013-09-27T11-17-00.000Z

Причина в том, что вы привязываете событие 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....

Попробуйте это, я надеюсь, что это вам поможет.