从动态创建的 html 表单按钮调用 Javascript 函数答案

【问题标题】：Call a Javascript function from dynamically created html form button从动态创建的 html 表单按钮调用 Javascript 函数
【发布时间】：2018-02-27 23:04:37
【问题描述】：

我有一个 javascript 文件，我在其中使用 html 标签创建表单。在这个表单上有 2 个按钮：Confirm 和 Cancel。当用户点击取消时，表单将被丢弃。我已经编写了在包含动态创建表单元素的代码的同一 javascript 文件中关闭表单的方法。但是，当我尝试关闭表单时，控制台上出现以下错误。

错误

调用方法的Javascript按钮

...
$("#lot").append(
        "<div class='form-group'></br>"+
            "<label class='col-md-12 control-label' for='tableFormConfirmButton'></label></br>"+
            "<label class='col-md-12 control-label' for='tableFormConfirmButton'></label></br>"+
            "<label class='col-md-12 control-label' for='tableFormConfirmButton'></label></br>"+
            "<label class='col-md-2 control-label' for='tableFormConfirmButton'></label>"+
            "&nbsp<button id='tableFormConfirmButton' name='tableFormConfirmButton' class='btn btn-primary' onclick='storeTableFormInfo("+newAgent+","+i+","+e+","+mouseTop+","+mouseLeft+","+elemType+")'>Confirm</button>"+
            "&nbsp&nbsp<button id='tableFormCancelButton' name='tableFormCancelButton' class='btn btn-danger' onclick='closeForm()'>Cancel</button>"+
        "</div></br>"
); 
...

同一个文件中的closeForm()方法

function closeForm()
{
    var myNode = document.getElementById("lot");
    var fc = myNode.firstChild;

    while( fc ) {
        myNode.removeChild( fc );
        fc = myNode.firstChild;
    }

    $(".toolbox-titlex").hide();
    $(".panel").hide();

    $("#container").removeClass("disabledbutton");
    $("#toolbox").removeClass("disabledbutton");
}

我尝试在主 JSP 页面中的 <script> 标记下添加 closeForm() 方法，然后它起作用了。但我的问题是我已经在该 JSP 中将这个 javascript 文件引用为 <script src="resources/js/taro/Customscripts/VisualEditor.js" type="text/javascript"></script> 在 <head> 下。那为什么不识别方法呢？

在这方面的任何建议都将受到高度赞赏。

【问题讨论】：

你包含jQuery的源码吗？
对于通过 HTML 属性进行的“老式”事件处理，该函数必须存在于 HTML 元素之前。但是你为什么要在这里使用它——你使用的是 jQuery，所以使用它的事件处理机制，不要将它与老式的混用。
@Nayantra 确定使用js文件时没有错误？
调用 onclick 时 - 定义 closeForm 的文件无关紧要 - 它已被全局公开（因此不鼓励使用此方法）。 closeForm 在 window 对象上可用吗？
@reporter 是的。我一直在使用这个 js 文件的其他方法，没有任何错误。当我在 onclick 上调用该方法时，会出现唯一的问题

标签： javascript html forms methods global

【解决方案1】：

尝试使用 jQuery 在 ready 函数中附加点击事件，以确保在附加事件之前加载所有代码：

$(function(){
    $('#tableFormCancelButton').on('click', closeForm);
});

并从按钮中删除内联事件onclick='closeForm()'。

希望这会有所帮助。

【讨论】：

这似乎是 jQuery 的一个怪癖。在普通 HTML 中，创建由内联侦听器调用的函数的脚本元素可以位于任何位置，包括在带有侦听器的 HTML 之后。另一种方法应该是将 closeForm 的声明放在将其作为侦听器附加的代码之前。

【解决方案2】：

尝试将 onclick='closeForm()' 更改为 onclick='test()' 并在 JSP 上添加

function test (){
   closeForm();
};

希望这会有所帮助。

【讨论】：