Call a function from a button that is created duri

问题:

I'm trying to call a function in the onclick event of the button that is created during the gridComplete event..Loads OK…here's what the rendered html looks like for the button in the first row

<input type="button" onclick="deleteRow(9197113);" value="Delete" style="height: 22px; width: 70px;">

but when i click the button…the function is not called and firebug says….

deleteRow is not defined

How can I call a function, rather than having inline javascript,,,(which does work BTW, but I would like to call the function for readability and maintainability). I've included the working inline javascript...it's commented out in the below snippet...

Below is the grid Complete portion of the jqGrid settings.

jQuery("#list").jqGrid({

   ........................

    gridComplete: function() {
        var ids = jQuery("#list").jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
            var cl = ids[i];
            de = "<input style='height:22px;width:70px;' type='button' value='Delete' onclick='deleteRow('" + cl + "' );' />";   
            //de = "<input style='height:22px;width:70px;' type='button' value='Delete' onclick=\"jQuery('#list').jqGrid('delGridRow', '" + cl + "', {msg: 'Delete this entry?'});\" />"; 
            jQuery("#list").jqGrid('setRowData', ids[i], { Delete: de });
        }
    }

   ........................

 });

Here's the deleteRow() function…

function deleteRow() {
    alert("hit delete button");
    // jQuery("#grid_id").jqGrid('delGridRow', row_id_s,options );
}

回答1:

I would change your grid complete function so that it gives the imput a class of say "delete" and then in my document ready function setup a live click event for that class selector.

something like this

gridComplete: function() {
    var ids = jQuery("#list").jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i++) {
        var cl = ids[i];
        de = '<input style="height:22px;width:70px;" type="button" class="delete" value="Delete" />';
        $("#list").jqGrid('setRowData', ids[i], { Delete: de });
    }
}

$('#list .delete').live('click',function(){
    var id = $(this).parent().attr('id');
});

回答2:

You could define deleteRow as a custom jQuery function, and then call it on selected elements.

$.fn.deleteRow = function() { 
    row_id = $(this).attr('id');
    return $("#grid_id").jqGrid('delGridRow', row_id);
}

Call it like this:

$("#grid_id button[value=Delete]").click( function() {
    $(this).parents('.row_class').deleteRow();
});

I'd imagine that would need to be more complex--I'm not familiar with jqGrid, but what you need to do is pretty straightforward.

---

Could you post some markup? It's difficult to tell how to select the row by ID without seeing it.