元素上的jQuery绑定事件失败

Question

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 "application". All it does is taking care of submitting a form. Before that, it processes the data.

Our initial method that we call on rendering the 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 the button " #submit_message " is clicked, it is supposed to call the _submit method of the OWebForm 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.

in the HTML I have the following code:

<script type="text/Javascript">
        var _oWebForm = new OWebForm("0bcfwqx23xv02dfaqfujdqyafziic4b07uxkkg1y6lkof7x0px0vjm2tpaik2l2rmlrhnjya0bvctnpq26dqcom1ij5zpibodke3rs1z4f2syllthtj0kpl3p4vrw0vw");       
        _oWebForm.init();
    </script>

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 ?

Answer 1

This works for me:

 var OWebForm = function(a){ }; OWebForm.prototype.init = function() { alert("init Method called"); $("#submit_message").on("click", this._submit); } OWebForm.prototype._submit = function(e){ e.preventDefault(); alert("_submit Method called"); } $(function() { var _oWebForm = new OWebForm("0bcfwqx23xv02dfaqfujdqyafziic4b07uxkkg1y6lkof7x0px0vjm2tpaik2l2rmlrhnjya0bvctnpq26dqcom1ij5zpibodke3rs1z4f2syllthtj0kpl3p4vrw0vw"); _oWebForm.init(); }); 

 <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <form id="myFrm"> <input type="text"> <input id="submit_message" type="submit" value="Click me To test"> </form> 

You need to substitute:

$("#submit_message").on("click", this._submit);

with:

$(document).on("click", "#submit_message", this._submit);

If the submit_message is not already loaded!

Answer 2

Your script is executed before the DOM is loaded so the element doesn't exist yet, and the jQuery selector doesn't match anything, so no elements get a click handler bound to them. You need to call the init() method with in $(document).ready() .

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

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