javascript - Jquery bind event on element fails -

we using jquery 2.1.4 , have written out own javascript class should take care of event. simple "application". taking care of submitting form. before that, processes data.

our initial method call on rendering page:

owebform.prototype.init = function(){     console.log("init method called");      ...     $("#submit_message").on("click", this._submit);     console.log($("#submit_message"));     ... } owebform.prototype._submit = function(e){     e.preventdefault();     console.log("_submit method called"); ...     } 

once button "#submit_message" clicked, supposed call _submit method of owebform class. when looking @ element within console can see not bound anything, when page loaded. hence code not executed once button clicked.

in html have following code:

<script type="text/javascript">         var _owebform = new owebform("0bcfwqx23xv02dfaqfujdqyafziic4b07uxkkg1y6lkof7x0px0vjm2tpaik2l2rmlrhnjya0bvctnpq26dqcom1ij5zpibodke3rs1z4f2syllthtj0kpl3p4vrw0vw");                _owebform.init();     </script> 

from documentation understood, function has exist before bound element event. not case when working objects ? how fix ?

your script executed before dom loaded element doesn't exist yet, , jquery selector doesn't match anything, no elements click handler bound them. need call init() method in $(document).ready().

a page can't manipulated safely until document "ready." jquery detects state of readiness you. code included inside $( document ).ready() run once page document object model (dom) ready javascript code execute.

$(document).ready(function() {     var _owebform = new owebform("0bcfwqx23xv02dfaqfujdqyafziic4b07uxkkg1y6lkof7x0px0vjm2tpaik2l2rmlrhnjya0bvctnpq26dqcom1ij5zpibodke3rs1z4f2syllthtj0kpl3p4vrw0vw");     _owebform.init(); });