Question

我们正在使用Jquery 2.1.4并编写了应该处理该事件的自己的javascript类。这是一个非常简单的应用程序＆＃34;。它只是负责提交表格。在此之前，它处理数据。

我们调用渲染页面的初始方法：

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

按钮＆＃34; #submit_message＆＃34;单击，它应该调用OWebForm类的_submit方法。在查看控制台中的元素时，我可以看到它在加载页面时没有绑定任何东西。因此，单击按钮后不会执行代码。

HTML中的

我有以下代码：

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

从我理解的文档中，函数必须在绑定到元素事件之前存在。处理对象时不是这种情况吗？我该如何解决这个问题？

Answer 1

这对我有用：

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！

Answer 2

您的脚本在加载DOM之前执行，因此该元素尚未存在，并且jQuery选择器不匹配任何内容，因此没有元素获得绑定到它们的单击处理程序。您需要在$(document).ready()中调用init()方法。

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。

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

元素上的Jquery绑定事件失败

2 个答案: