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

Question

我有一个javascript文件，正在使用html标签创建表单。 在此表单上有2个按钮： 确认和取消 。 当用户单击取消时，该表格将被丢弃。 我已经编写了在包含用于动态创建表单元素的代码的同一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> 。 那么为什么不认识这种方法呢？

在这方面的任何建议将不胜感激。

Answer 1

尝试使用jQuery将click事件附加到ready函数中，以确保在附加该事件之前已加载所有代码：

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

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

希望这可以帮助。

Answer 2

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

function test (){
   closeForm();
};

希望这可以帮助。

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

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-09-19 08:46:46

解决方案2
0 2017-09-19 08:54:12

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

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-09-19 08:46:46

解决方案2 0 2017-09-19 08:54:12

解决方案1
3 已采纳 2017-09-19 08:46:46

解决方案2
0 2017-09-19 08:54:12