Cannot bind click() event to HTML control
<p>Here's my setup.  I'm using .NET:</p>

<ol>
<li><p>I have a Main.aspx lets call it.  That page inherits a master page and the Master Page as usual includes the jQuery library and other includes that we use for jQuery that are global in scope</p></li>
<li><p>In Main.aspx is an HTML plain vanilla IFrame:  </p></li>
<li><p>In that IFrame is another .aspx page.  Lets call it for all tense and purposes Sub.aspx</p></li>
<li><p>In Sub.aspx I've got the following code:</p></li>
</ol>

<p><code>
   &lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sub.aspx.cs"  Inherits="xxxx.xxxx.xxxx" %></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head id="Head1" runat="server"&gt;
        &lt;link href="Content/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
        &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
        &lt;div id="facebookPhotos-iFrameContent"&gt;
            &lt;div&gt;
                &lt;p id="buttoTestContainer"&gt;                    
                    &lt;input type="image" id="btnLogin" src="images/loginBtn.jpg" /&gt;
                &lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;    
    &lt;script type="text/javascript"&gt;    
        var loginButtonID = 'btnLogin';
        //alert(loginButtonID);                   
        window.fbAsyncInit = function () {
            // Initialize/load the JS SDK
            // cookie is set to true to activate JS SDK cookie creation &amp; management
            FB.init({ appId: facebookApplicationID, status: true, cookie: true, xfbml: false });
            alert("got here");
            // also handles the case when they are already logged in
            $('#' + loginButtonID).click(function () {
                alert("login button was fired");
                TestLogin();
            });
            //...rest of code
        });
</code></pre>

<p></code></p>

<p><strong>The problem:</strong></p>

<p>When trying to debug to make sure that .click() event gets called so it binds to my control, I never get to the first alert "got here" so that I know the JS was called at least up to that point.  So not sure why.  I see absolutely no JS errors in my FireBug console either.</p>
