What do I need to fill at "// callback code" to get Mailcheck working? (jquery usage)
<p><strong>SOLVED</strong></p>

<p><strong>Mailcheck uses the "on" method, which isn't available in the outdated version of JQuery that I was using. THANK YOU TO KUFI AND MARTIN.</strong></p>

<p>I'm a beginner at Javascript/Jquery, and I am stuck trying to get <a href="https://github.com/Kicksend/mailcheck" rel="nofollow">this</a> to work.</p>

<p>I have a working form on my website, where I would like to add this client-side spell-check for popular email domains. The id of the text field for the email address is simply "Email", so I have made this little change (capital E).</p>

<p>So my code looks like this... with some test statements.</p>

<pre><code>&lt;script&gt;
document.write("test0");
document.getElementById('testspan').innerHTML = 'test3';

var domains = ['hotmail.com', 'gmail.com', 'aol.com'];
$('#Email').on('blur', function() {
  $(this).mailcheck({
    domains: domains,   // optional

    suggested: function(element, suggestion) {
      // callback code
      document.getElementById('testspan').innerHTML = 'test4';
      document.write("test1");
    },

    empty: function(element) {
      // callback code
      document.write("test2");
    }

  });
});
&lt;/script&gt;
</code></pre>

<p>The text "test0test3" does appear as expected, similar to what would happen if I did a PHP echo.</p>

<p>But nothing visibly happens when focus leaves the my email textbox.</p>

<p>I don't know if I have given enough detail for someone to identify where I've gone wrong...</p>

<p>I don't really understand what I am supposed to write in the place marked "//callback code". Do I need to manually provide the code that would make the "Did you mean ..." text appear as in their screenshot? <img src="http://i.stack.imgur.com/s03ix.png" alt="enter image description here"></p>

<p><strong>Thank you, Kufi and Martin.</strong> 
I have followed Kufi's code, and also inserted </p>

<pre><code>&lt;span id="suggestedEmail"&gt;&lt;/span&gt; 
</code></pre>

<p>after the email text input element. But nothing happens. Could someone suggest a suitable test statement I can write inside the callback function to definitively find out whether the code path is being exercised or not. I have a feeling it isn't.</p>

<p><strong>UPDATE 3</strong></p>

<p><strong>Thank you again Kufi and Martin,</strong></p>

<p>I have not been able to get it to work, even after making a minimal .HTML file for testing... I feel that now, someone would be able to spot the error I have made.
Here is the entirety of my test file.</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&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /&gt;
&lt;title&gt;Testing mailcheck&lt;/title&gt;
&lt;script type="text/javascript" src="js/jquery-1.3.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.mailcheck.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;form id="form1" name="form1" method="post" action="contactus_mail.php"&gt;
 Name: &lt;input name="name" type="text" id="name" size="30"  /&gt; &lt;/br&gt;
 Email: &lt;input name="email" type="text" id="email" size="30" /&gt;  &lt;span id="suggestedEmail"&gt;&lt;/span&gt; &lt;/br&gt;
 Subject: &lt;input name="subject" type="text" id="subject" size="72" value="" /&gt; &lt;/br&gt;
 &lt;input name="Submit" type="submit" value="Submit"/&gt;
&lt;/form&gt;

&lt;/br&gt;
&lt;span id="testspan1"&gt;&lt;/span&gt;
&lt;/br&gt;
&lt;span id="testspan2"&gt;&lt;/span&gt;
&lt;/br&gt;

&lt;script type="text/javascript"&gt;
$("#testspan1").html("test1");
$(function() {
var domains = ['hotmail.com', 'gmail.com', 'live.com', 'yahoo.com'];
 $("#email").on('blur', function() {
  $(this).mailcheck({
    domains: domains,   // optional
    suggested: function(element, suggestion) {
      // callback code
      $("#suggestedEmail").html("Did you mean " + suggestion.full);
    },
    empty: function(element) {
      // callback code
      document.write("empty was called");
    }
  });
 });
});
$("#testspan2").html("test2");
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Is there anything I have to check besides the reachability of the two external JS files? Jquery versions?</p>

<p><strong>SOLVED!</strong></p>

<p>I was getting:</p>

<pre><code>Uncaught TypeError: Object #&lt;Object&gt; has no method 'on'
</code></pre>

<p>at the line that looks like:</p>

<pre><code>$("#email").on('blur', function() {
</code></pre>

<p>This went away when I switched from using JQuery 1.3.2 to the current 1.7.2.</p>
