$find().click not working

Question

I've got multiple cancel controls for my modalpopup, but only btnCancel is working, the $find().click isn't working, I'm receiving "Error: Unable to get value of the property 'click': object is null or undefined" Any help would be greatly appreciated.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="web.WebForm1" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptManager" EnablePageMethods="true">
    </asp:ScriptManager>
    <asp:Button ID="btnShowPopupAmend" runat="server" />
    <asp:ModalPopupExtender ID="mpeAmend" runat="server" TargetControlID="btnShowPopupAmend"
        PopupControlID="pnlpopupAmend" CancelControlID="btnCancel" BackgroundCssClass="modalBackground" />
    <asp:Panel ID="pnlpopupAmend" runat="server" Width="700px" Style="display: none;"
        class="ModalPanel">
        <img src="images/close.png" style="cursor: hand" onclick="$find('btnCancel').click()"
            width="15" height="15" />
        <asp:Button ID="btnCancel" Text="Cancel" runat="server" OnClick="btnCancel_Click" />
    </asp:Panel>
</asp:Content>

Answer 1

I'd take the logic out of the elements...

put an id on your image, like 'closeImg'

then your js can be like this:

$('#closeImg').click( function() {
    $('#btnCancel').click();
});
$('#btnCancel').click( function() {
    //whatever you want to have happen
});

an example: http://jsfiddle.net/vgDPd/

make sure to put this in a $(document).ready() so the dom is loaded for it