Using anchor on gridlink fires both gridlink.click() and anchor.click() actions

I have a MvcContrib Html.Grid of items. One each grid row, I have a "delete button" which is actually a styled anchor <a>. If you click on the gridrow away from the anchor, an action fires which displays details for the item selected. If you click on the anchor within the gridrow, both the details action fire开发者_开发知识库s (first) and the delete action fires (second). Going through the debugger, both actions are executing simultaneously starting with details. This causes an null reference exception in certain situations.

I've messed with event.preventDefault() and some other techniques to try and stop both from being fired when the anchor is clicked, but I can't seem to figure it out. Does anyone have any insight on this? Should I be using an actual <input type="button" /> for each row?

Here is my "button" on the grid row:

column.For(s => "<a class=\"delete fg-button ui-state-default fg-button-icon-left ui-corner-all\" href=\"#\"><span class=\"ui-icon ui-icon-trash\"></span>Delete</a>").Named("").DoNotEncode(); })

Here are the two events fired:

$(".gridlink").click(function () { getDetails($(this)); });

$("#subscriptions table.grid tbody > tr .fg-button.delete").live('click', deleteHandler);

---

You could try stopping the event from bubbling:

$('#subscriptions table.grid tbody > tr .fg-button.delete').live('click', function(evt) {
    deleteHandler();
    evt.stopPropagation();

    // preventing the default action might not actually be necessary in this case
    // as your delete anchor href points to # so there is no default action.
    evt.preventDefault();
});

as far as the .gridlink click is concerned you might need to do the same.