Buttons stopped working after adding jqGrid

Question

I suspect something my JS is causing the buttons to not be clickable. If I comment out the jqGrid code, the buttons will work.

The button and anchor are both not working, they seem disabled, though I don't see anything making them so.

js:

$(document).ready(function () {

    $("#hardware-grid").jqGrid({

        url: '/Hardware/PopulateHardwareGrid',
        datatype: "json",
        colNames: ['Id', 'Type', 'Model', 'Description', 'Price', 'Select'],
        colModel: [
                { name: "Id", key: true, hidden: true },
                { name: "ItemType" },
                { name: "Model" },
                { name: "ItemDescription", width: 400 },
                { name: "Price", formatter: "currency", align: "center" },
                { name: "Select", formatter: 'actions', formatOptions: { keys: true, } }
        ],
        loadonce: false,
        height: 'auto',
        pager: '#grid-pager'

    });

    $("#clicky").on('click', function () {
        alert("This is working");
    });

});

html:

<input type="button" value="Alert Selected ID" class="btn btn-default" id="clicky" />


<div class="tile tile-blue">
    <h2>Computers</h2>
    <table class="table table-bordered table-striped" id="hardware-grid"></table>
    <div id="grid-pager"></div>

    <hr />

    <h2>Mobile Devices</h2>


   <a class="btn btn-info" href="/Accessory">Next</a>


</div>

Answer 1

Not sure if there is a need of ' , ' after { keys: true, } . Also you can put

$("#clicky").on('click', function () {
        alert("This is working");
    });

before

$("#hardware-grid").jqGrid({..