Событие связывания Jquery на элементе не работает

Question

Мы используем JQuery 2.1.4 и выписали собственный класс javascript, который должен позаботиться о событии. Это очень простое приложение. Все, что он делает, - это забота о предоставлении формы. До этого он обрабатывает данные.

Наш первоначальный метод, который мы называем на обработку страницы:

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"); 
... 
    } 

После нажатия кнопки «#submit_message» нажата, предполагается назвать _submit метод класса OWebForm. Когда вы смотрите на элемент внутри консоли, я вижу, что он не привязан ни к чему, когда загружается страница. Следовательно, код не запускается после нажатия кнопки.

в HTML У меня есть следующий код:

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

Из документации, я понял, что функция должна существовать до того, связан с событием элемента. Не работает ли это при работе с объектами? Как я могу это исправить?

Answer 1

Ваш скрипт выполнен до загрузки DOM, так что элемент еще не существует, а селектор jQuery не соответствует чему-либо, поэтому никакие элементы не получают привязки к ним. Вам необходимо позвонить по методу init() в $(document).ready().

Нельзя безопасно манипулировать страницей, пока документ не будет готов. jQuery определяет это состояние готовности для вас. Код, включенный внутри $ (document) .ready() будет запускаться только после того, как страница Document Object Model (DOM) готова для выполнения кода JavaScript.

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

Answer 2

Это работает для меня:

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>

Вы должны заменить:

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

с:

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

Если submit_message еще не загружен!