Knockout click binding does not work with slick carousel

Question

After rendering tables using knockout, I use slick carousel to create slide transitions. The problem is that the knockout click binding stops working when I click on the slide. Attaching part of the code for reference.

<div data-bind="foreach : $root.AllPackages()" class="row plans-content">
<div class="table-responsive">
    <table class="plans-content-table">
        <tbody>
            <!-- ko foreach: Object.keys(WidgetPacks) -->
            <!-- ko foreach: $parent.WidgetPacks['default'] -->
            <tr>
                <td colspan="2">
                    <p>
                        <span class="tooltip" data-bind="attr:{'title': Desc}">
                        <span data-bind="text:Name"></span>
                        <br />
                    </p>
                </td>
            </tr>
            <!--/ko-->
            <tr data-bind="$if:$data!=null && $data!='default', visible:$data!=null && $data!='default'">
                <td>
                    <p data-bind="text:$data"></p>
                </td>
            </tr>
            <!-- /ko -->
            <tr>
                <td colspan="2" class="text-center">
                    <span class="btn btn-lg yellow-btn-pricing-plan">
                        <a data-bind="click: $root.CheckoutPlans" class="btn btn-yellow btn-md">
                             Purchase a Plan
                        </a> 
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Creating the slick carousel:

$('.plans-content').slick({
            adaptiveHeight: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            initialSlide: 0
        });
        $('.plans-content').slick("refresh");