Not using anonymous function and having access to this and e
<p>I would like to put the script inside an anonymous function in a separate function so that I can use it on various elements without duplicating the code.  The script needs to have access to both <code>this</code> and <code>e</code>.  <code>myID1</code> is using an anonymous function before trying to use a separate function.  <code>myID2</code> works, but I have a feeling isn't the preferred way.  <code>myID3</code> has access to <code>this</code>, but I couldn't figure out how to access <code>e</code>.  How is this done?</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&lt;/title&gt;  
        &lt;script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"&gt;&lt;/script&gt; 
        &lt;script type="text/javascript"&gt;
        function otherFunction2(e,This){console.log(e,This);} 
        function otherFunction3(){console.log(this);} 
            $(function(){
                $('#myID1').on("click", "a.myClass", function(e){console.log(e,this);});
                $('#myID2').on("click", "a.myClass", function(e){otherFunction2(e,this);});
                $('#myID3').on("click", "a.myClass", otherFunction3); //Can't access e
            });
        &lt;/script&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;div id="myID1"&gt;&lt;a href="javascript:void(0)" class="myClass"&gt;Click Me&lt;/a&gt;&lt;/div&gt;
        &lt;div id="myID2"&gt;&lt;a href="javascript:void(0)" class="myClass"&gt;Click Me&lt;/a&gt;&lt;/div&gt;
        &lt;div id="myID3"&gt;&lt;a href="javascript:void(0)" class="myClass"&gt;Click Me&lt;/a&gt;&lt;/div&gt;
    &lt;/body&gt; 
&lt;/html&gt; 
</code></pre>
