I am trying to handle the click of custom button in a jqgrid. I have the buttons showing up, but when they are clicked, my function does not run. If I click a button outside the jqgrid, the script runs. Does jqgrid consume the button click? Not sure what I am missing or not understanding. Here is the grid. The reason I am not reloading the entire grid is there is too much processing on the server, and need to manually remove the row on the client once the editurl processes the "send." See: $(".sendbuttons").click(function(){
...
<style type="text/css">
.sendbuttons {
height:19px;
width:60px;
color:red;
}
</style>
<script language="javascript">
jQuery(document).ready(function(){
var last_row;
jQuery("#gridlist").jqGrid({
url:'manual_responses.php',
datatype: "json",
colNames:['ID','Image','Keyword','send Found','Proposed send',''],
colModel:[
{name:'item_id', index:'item_id', width:45, editable:false, hidden:true},
{name:'image', index:'image', width:45},
{name:'keyword',index:'keyword', width:100, editable: false},
{name:'item_found',index:'item_found', width:130, editable: false},
{name:'proposed_send',index:'proposed_send', width:130, editable: true, edittype:"textarea", editoptions:{rows:"2",cols:"37"}},
{name:'options',index:'options',width:40,editable: false}
],
rowNum:40,
rowList:[20,40,60],
imgpath: 'css/themes/sand/images',
sortname: 'keyword',
viewrecords: true,
sortorder: "asc",
caption:"Proposed sends",
onSelectRow: function(item_id){
if(item_id && item_id!==last_row){
jQuery("#gridlist").restoreRow(last_row);
jQuery("#gridlist").editRow(item_id,true);
last_row=item_id;
}
},
loadComplete: function(){
//alert('ok, loadComplete running');
var ids = jQuery("#gridlist").getDataIDs();
for(var i=0;i<ids.length;i++){
var cl = ids[i];
send = "<input class='sendbuttons' id='tbuttonSend"+cl+"' type='button' value='Send' /><br />";
clear = "<input class='sendbuttons' id='tbuttonClear"+cl+"' type='button' value='Send' /><br />";
jQuery("#gridlist").setRowData(ids[i],{options:send+clear})
}
},
editurl: "item_send.php",
height:400,
width:796,
reloadAfterSubmit:false
}).navGrid('#pager2',{edit:true,add:false,del:false });
$(".sendbuttons").click(function(){
alert("got to 1");
});
});
</script>
</head>
<body>
<table id="gridlist" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager2" class="scroll" style="text-align:center;"></div>
<input type='button' class='sendbuttons' id='323423x' value='go:'/>
</body>
</html>