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

Question

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

Error

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 文件引用为 <head> 下的 <script src="resources/js/taro/Customscripts/VisualEditor.js" type="text/javascript"></script>。那么为什么它不识别该方法？

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

Answer 1

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

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

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

希望对您有所帮助。

Answer 2

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

function test (){
   closeForm();
};

希望对您有所帮助。

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

Call a Javascript function from dynamically created html form button

html

javascript

forms

methods

global