jQuery bind event on element fails
<p>We are using jQuery 2.1.4 and have written out own JavaScript class that should take care of the event. It is a very simple &quot;application&quot;. All it does is taking care of submitting a form. Before that, it processes the data.</p>
<p>Our initial method that we call on rendering the page:</p>
<pre><code>OWebForm.prototype.init = function(){
    console.log(&quot;init Method called&quot;);

    ...
    $(&quot;#submit_message&quot;).on(&quot;click&quot;, this._submit);
    console.log($(&quot;#submit_message&quot;));
    ...
}
OWebForm.prototype._submit = function(e){
    e.preventDefault();
    console.log(&quot;_submit Method called&quot;);
...
    }
</code></pre>
<p>Once the button &quot;<code>#submit_message</code>&quot; is clicked, it is supposed to call the <code>_submit</code> method of the <code>OWebForm</code> class. When looking at the element within the console I can see that it is not bound to anything, when the page is loaded. Hence the code is not executed once the button is clicked.</p>
<p>In the HTML I have the following code:</p>
<pre><code>&lt;script type=&quot;text/Javascript&quot;&gt;
        var _oWebForm = new OWebForm(&quot;0bcfwqx23xv02dfaqfujdqyafziic4b07uxkkg1y6lkof7x0px0vjm2tpaik2l2rmlrhnjya0bvctnpq26dqcom1ij5zpibodke3rs1z4f2syllthtj0kpl3p4vrw0vw&quot;);       
        _oWebForm.init();
    &lt;/script&gt;
</code></pre>
<p>From the documentation I understood, that the function has to exist before it is bound to an element event. Is this not the case when working with objects? How would I fix this?</p>