Knockout.js ul li index() once recognized once not

Question

I have following code which works just fine

<form class="form-horizontal"> 
        <ul data-bind="foreach: SelectedCategories">
            <li>
                <input type="hidden" data-bind="attr: { Name: 'SelectedCategories[' + $index() +']'},
                                                value: $data" />
                <span data-bind="text: $data"></span>
                <input type="button" data-toggle="tooltip" title="USUN" data-bind="value: 'X',
                                                event: {click: $parent.removeCategory.bind($data)}" />
            </li>
        </ul>

But when I add couple hidden fields within form but before ul element then browser informs that it cannot recognize index()

unrecognized expression: input[data-bind='attr: { Name: 'SelectedCategories[' + $index() +']'}, value: $data']

code which causes error looks as follows

<form class="form-horizontal">
        <input type="hidden" data-bind="attr:{Name : 'Product.Id'},
                                        value: Product.Id" />
        <input type="hidden" data-bind="attr:{Name : 'Product.Name'},
                                        value: Product.Name" />
        <input type="hidden" data-bind="attr:{Name : 'Product.Quantity'},
                                        value: Product.Quantity" />
        <input type="hidden" data-bind="attr:{Name : 'Product.Netto'},
                                        value: Product.Netto" />
        <ul data-bind="foreach: SelectedCategories">
            <li>
                <input type="hidden" data-bind="attr: { Name: 'SelectedCategories[' + $index() +']'},
                                                value: $data" />
                <span data-bind="text: $data"></span>
                <input type="button" data-toggle="tooltip" title="USUN" data-bind="value: 'X',
                                                event: {click: $parent.removeCategory.bind($data)}" />
            </li>
        </ul>

Even though error message shows up function index() returns valid number so everything looks good except browser returning error. If I place hidden fields after ul no error occures. Do you have any idea what can cause such a problem?

Cannot reproduce using the code you provided... https://jsfiddle.net/8pt4vc59/ — user3297291, Dec 21 '16 at 13:07
I added screen to post. I testes in Mozilla and Chrome and in either case exception occurred. — Maximus, Dec 21 '16 at 14:24
Possibly a BrowserLink bug. Try adding a unique ID to the HTML elements reference here: [https://stackoverflow.com/questions/35129182/unrecognized-expression-on-browserlink](https://stackoverflow.com/questions/35129182/unrecognized-expression-on-browserlink) — 300 baud, Dec 21 '16 at 20:47
have you tried with `$index` instead of `$index()`. Also try `SelectedCategories[$index]` — Muhammad Raheel, Dec 23 '16 at 13:22

Knockout.js ul li index() once recognized once not

0 Answers0