$("#phone").blur(function () { 
        alert('on blur');      
   });

form code:

<form id="input_form" action="">
...
<td class="text_right">phone: </td>
<td class="text_left">
<input id="phone" class="input" type="text" value="(123) 456-7890" name="phone" style="background-color: yellow" maxlength="15" size="15">
</td>

your code is not complete...

using your sample code, this seems to work just fine..

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<input id="phone1" class="input" type="text" ><br />
<input id="phone2" class="input" type="text" >

<script>
$("#phone1").blur(function () { 
     alert('on blur');      
});
</script>
</body>
</html>

Your code worked for me also.
I must have conflicting ID's and that is possible.

I found the problem -- stupid mistake!
I didn't link to the correct .js file in the Ajax.load file.
I assumed that linking in the parent file was sufficient.

Glad to hear you resolved your problem.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.