jquery inside Bootstrap modal

I'm using jquery code to check for duplicates in a database as the user types an email address in a field.  The code works fine until I place the field inside a Bootstrap modal.

Here's the jquery function

    <script type="text/javascript"> //Check if family email address has already been used.
	$(document).ready(function() {
    var x_timer;    
    $("#f_email").keyup(function (e){
        clearTimeout(x_timer);
        var f_email_var = $(this).val();
        x_timer = setTimeout(function(){
            check_f_email_ajax(f_email_var);
        }, 1000);
    });

function check_f_email_ajax(f_email){
    $("#user-result").html('<img src="ajax-loader.gif" />');
    $.post('/support/check_f_email.php', {'f_email':f_email}, function(data) {
      $("#user-result").html(data);
    });
}
});
</script>

Here's the form code

<div id="registration-form">
  <label for="f_email">Enter f_email :
  <input name="f_email" type="text" id="f_email" maxlength="45"> <span id="user-result"></span>
  </label>
</div>

The page is here..

http://testregister.cenational.org/cc/dashboard.php

You'll see at the top a field where the jqery call works--when you finish typing, the database is dup-checked for the email address.  But when you click 'Add Family' you'll see a field called 'Enter f_email' that doesn't work.

Thanks for any help give,

Steve