Data-bind click is not working in Chrome with nested for loop

Question

The below code works fine in IE. We have a download link which is getting disabled based on a condition. The same code is not working in Chrome.

In Chrome the Link is not getting disabled. Is there an alternative solution for this such that works in Chrome as well?

I have observed in the developer tools

In IE:

<a disabled="" href="#" ...>

In Chrome:

<a href="#"...>

The data-bind="click: $root.studentsp where the $root which is not working in Chrome.

We have used a nested loop in the code, this is the relevant Code Block:

<div data-bind="foreach: studentDetails">
    <div class="row" id="Items">
        <table class="table table-striped branded-table" style="margin-top: 24px">
            <tbody data-bind="foreach: cp">
                <tr>
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: rollno"></td>
                    <td data-bind="text: Format"></td>
                    <td> 
                         <a href="#" data-bind="click: $root.studentsp, enable: !$root.isavailable()">displayed</a>
                    </td>
                    <td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Your question is rather unclear. The title claims "click event doesn't fire", but [the `click` is handled just fine in Chrome.](http://jsfiddle.net/q8rpenrt/1/). Your question says "the data-bind=click is not gettingdisabled": I'm not sure what that means, but it seems to be something different. Please realise that [the `enable` binding](https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/enableDisable.js) will merely set the `disabled` attribute, which will not do much by default. Please edit your question and include a full repro for your problem. — Jeroen, Jul 17 '15 at 06:28

score 0 · Answer 1 · edited May 23 '17 at 12:29

From the docs for the enable binding, emphasis mine:

The enable binding causes the associated DOM element to be enabled only when the parameter value is true. This is useful with form elements like input, select, and textarea.

You can also see this in the relevant source file.

There is no disabled attribute for anchor tags. The best source for alternatives is probably this question. Skipping that, going to a dumb but straightforward way to do it with just KnockoutJS would be:

<a href="#" data-bind="click: $root.studentsp, visible: !$root.isavailable()">displayed</a>
<span data-bind="visible: !!$root.isavailable()">displayed</span>

Since OP's commented that this won't work as it would be "making the control invisible", here's a proof of concept for this solution:

ko.applyBindings({
  studentsp: function() { alert('clicked'); },
  isavailable: ko.observable(false)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<a href="#" data-bind="click: $root.studentsp, visible: !$root.isavailable()">displayed</a>
<span data-bind="visible: !!$root.isavailable()">displayed</span>
<hr />
<input type="checkbox" data-bind="checked: $root.isavailable" /> isavailable

Checked with this but completely making the control invisible. — user1877936, Jul 17 '15 at 09:09
Which is why I've explained in my comment to your question as well as my answer that it's important you *include an actual repro* for your situation in the question. As you can see from my edit, the basic solution I've posted works just fine. — Jeroen, Jul 17 '15 at 09:15

Data-bind click is not working in Chrome with nested for loop

1 Answers1