CODEWITHSUNDEEP
javascripthtmlasp.net-mvcknockout.js
LockTar
LockTar

Reputation: 5467

Hyperlink not working in table row with click event

I have a table with 4 rows that are repeated by a knockout foreach in the <tbody>. The first row is a Basketball Match and the other 3 rows are the Task performers (referee etc) of the match. I have in the match row a hyperlink to a details page of the location of the sportshall in the city were the match will be played.

The problem is that the performer rows can be expanded and collapsed. This all works fine but now the hyperlink is not working anymore because then the knockout click event is fired. When I do a right mouse click on the hyperlink and say "open in new tab" the hyperlink works fine. So the problem is that the row knockout click is overruling the hyperlink.

Of course I can exclude the TD of the hyperlink and add the collapse click event to the other TDs but that is not what I want.

<tbody data-bind="foreach: Matches">
    <tr class="hover-row" data-rowtype="Match" data-bind="click: ExpandTaskToggle">
        <td><i class="glyphicon" data-bind="css: IconExpanded"></i></td>
        <td data-bind="text: Time"></td>
        <td class="hidden-lg hidden-md" data-bind="text: Team.ShortName"></td>
        <td class="hidden-sm hidden-xs" data-bind="text: Team.Name"></td>
        <td data-bind="text: Opponent"></td>
        <td class="hidden-xs" data-bind="text: Location.City"></td>
        <td><a data-bind="text: Location.SportsHallName, attr: { href: '/SportLocation/Details/' + Location.Id() }"></a></td>
    </tr>
    <!-- ko if: IsExpanded -->
    <tr data-rowtype="Task">
        <td class="striped"></td>
        <td colspan="2" class="striped">
            <strong>Scheidsrechters </strong>
        </td>
        <td colspan="2" class="striped" data-bind="foreach: Referees">
            <span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Referees.length - 1)">, </span>
        </td>
        <td class="hidden-xs striped"></td>
    </tr>
    <tr data-rowtype="Task">
        <td class="striped"></td>
        <td class="striped">
            <strong>Scorer </strong>
        </td>
        <td class="striped" data-bind="foreach: Scorers">
            <span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Scorers.length - 1)">, </span>
        </td>
        <td class="striped">
            <strong>Timer </strong>
        </td>
        <td class="striped" data-bind="foreach: Timers">
            <span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.Timers.length - 1)">, </span>
        </td>
        <td class="hidden-xs striped"></td>
    </tr>
    <tr data-rowtype="Task">
        <td class="striped"></td>
        <td colspan="2" class="striped">
            <strong>Zaalwacht </strong>
        </td>
        <td colspan="2" class="striped" data-bind="foreach: SportsHallGuards">
            <span data-bind="text: PerformerFullName, style: { 'background-color': SelectedPerformerBackground }"></span><span data-bind="if: $index() != ($parent.SportsHallGuards.length - 1)">, </span>
        </td>
        <td class="hidden-xs striped"></td>
    </tr>
    <!-- /ko -->
</tbody>

Upvotes: 0

Views: 1058

Answers (1)

Ilya Luzyanin
Ilya Luzyanin

Reputation: 8110

From the documention to knockout:

Note 3: Allowing the default click action
By default, Knockout will prevent the click event from taking any default action. This means that if you use the click binding on an a tag (a link), for example, the browser will only call your handler function and will not navigate to the link’s href.
<...>
However, if you do want to let the default click action proceed, just return true from your click handler function.

And:

Note 4: Preventing the event from bubbling
<...>
If necessary, you can prevent the event from bubbling by including an additional binding that is named clickBubble and passing false <...>

I think something like this should work:

<a data-bind="text: Location.SportsHallName, attr: { href: '/SportLocation/Details/' + Location.Id() }, click: function() { return true; }, clickBubble: false"></a>

Upvotes: 1

Related Questions