Trouble binding a submit() event handler to a form that was loaded using .load()

Trouble binding a submit() event handler to a form that was loaded using .load()

Hi,

I have been trying for several days to solve this problem. Hopefully somebody can help.

When I load my page I am using the .load() function to load a section of HTML from another .html file into the current page, as follows:

$(document).ready(function() {
      $('#login_js').load('_HTMLCodeLibrary.html #loginform');

On the very next line I am attempting to bind a submit event handler to the form:

    $('#loginform').submit(function() {
      $.post('member.php', $(this).serialize(), function(data, status) {
        data = eval('(' + data + ')');

        if (data.msg) {
          $('#login_msg').html('<p>' + data.msg + '</p>');
        }
        else {
          $('#login_js').slideUp(175);
          $('#login_link').css(_linkUp);
        }
      });
      return false;  // Prevent default submit action
    });

The form HTML is as follows:

<body>

      <div id="login_js">
        <form id="loginform" name="loginform" method="post" action="member.php">
          <table width="404">
            <tr>
              <td style="width: 8px"></td>
              <td><label for="username">Member Name</label></td>
              <td><label for="passwd">Password</label></td>
            </tr>
            <tr>
              <td style="width: 8px"></td>
              <td><input id="username" class="login" name="username" type="text"     maxlength="20" value="" /></td>
              <td><input id="passwd"   class="login" name="passwd"   type="password" maxlength="20" value="" /></td>
              <td><input id="submit"   class-"login" name="submit"   type="submit"   value="Login" /></td>
            </tr>
            <tr>
              <td style="width: 8px"></td>
              <td><a href="register_form.php" rel="nofollow">New Member?</a></td>
              <td><a href="forgot_form.php"   rel="nofollow">Forgot password?</a></td>
            </tr>
          </table> 
          <p id="login_msg"></p>
        </form>
      </div> <!-- login_js -->

</body>

In my current page I am loading the form into:

      <div id="login_js"></div>


The form is loading fine, but for some reason the submit() is not getting attached to the form. Therefore when I submit it is running member.php from the form "action".  Ultimately, I want to be able to run member.php from $.post() so that I can tell member.php that JavaScript is enabled.

Can anybody out there see what is going wrong?  It seems like a pretty straightforward thing that I am doing.

Currently I am running an older version of jQuery.  I am about to link up to the latest Google version.

Any help will be greatly appreciated.

Thanks,

Jim