元素上的jQuery绑定事件失败

jQuery bind event on element fails

本文关键字：事件 失败 绑定 jQuery 元素      更新时间：2023-09-26

我们使用的是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");
...
    }

一旦按钮"；CCD_ 1"；则应该调用OWebForm类的_submit方法。当查看控制台中的元素时，我可以看到它在加载页面时没有绑定到任何东西。因此，一旦单击按钮，代码就不会执行。

在HTML中，我有以下代码：

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

根据我所了解的文档，函数在绑定到元素事件之前必须存在。处理对象时不是这样吗？我该怎么解决这个问题？

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

在文档"就绪"之前，无法安全地操作页面。jQuery会检测到这种就绪状态。包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码后才会运行。

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

这对我有效：

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（"单击"，this.submit）；

带有：

$（document）.on（"单击"，"#submit_message"，this.submit）；

如果submit_message尚未加载！

相关文章：