Handle onclick event for partial view buttons

Question

I have in a page more partial views rendered. This is how the page looks:

I need to handle to onclick event for the button Create Invoice

 <div class="row">
    <div class="button-bar col-md-2">
        @Html.ActionLink(@Resources.Common.ShowInvoice, "EditLotDamage", "TimberMonitor", new { Id = 0, LotId = ViewBag.Id }, new { @class = "btn btn-success" })
    </div>

    <div class="button-bar col-md-2">
        @Html.ActionLink(@Resources.Common.CreateInvoice, "EditLotDamage", "TimberMonitor", new { Id = 0, LotId = ViewBag.Id }, new { @id = "InvoiceDamageButton", @class = "btn btn-success", onclick = "validate" })
    </div>
</div>

The buttons are on a partial view with name: LotDamageButtonBarPartial , which is rendered from another partial view like this:

........
tabDamage.SetContent(() =>
    {
        if (ViewBag.CanModify)
        {
            Html.RenderPartial("LotDamageButtonBarPartial");
        }
        Html.RenderAction("LotDamageListPartial", new { LotId = ViewBag.Id });
    });
   ........

I have tried to handle the onclick event like this in the main page:

 $(document).ready(function () {

        $('#InvoiceDamageButton').click(function ()
        { 
            alert("test");
        });
});      

but it is not working. Can you advise?

Answer 1

When you are creating InvoiceDamageButton button, you are also defining an onclick handler for it here: onclick = "validate" .

I don't know the code of validate() but it is probably stoping event propagation and the event never triggers your jQuery function.

Check if there's a e.stopPropagation(); inside function validate, if there is then remove this line. Also, check if validate() is returning false and if it is, change that too (either don't return anything or return true).