javascript - 简单表单提交不调用 javascript 函数(JQuery)

Question

我只发布了部分 javascript 代码，因为完整的代码太多了，无法全部发布到这里。但是可以找到整个html代码here

powerInput() 不会被调用。我只是不知道如何在 Jquery 中编写代码。任何帮助都会很棒。

function someFunction(){

$('#second').append('$${t}^x\\sqrt{t}^x$$');
          $('#container').append('<div id="third" ondrop="drop(event)" ondragover="allowDrop(event)"></div>');

$('#third').append('<form onsubmit="powerInput()">');

$('#third').append('<span style="position:absolute; top: 10px; left: 50px;">$${t}\\sqrt{t}$$</span>').css("font-size","200%");

$('#third').append('<input type="text" name="fpower" maxlength="1" style="width: 10px; height:9px; position:absolute; top:27px; left: 60px;">');

$('#third').append('<input type="text" name="spower" maxlength="1" style="width: 10px; height:9px; position:absolute; top: 25px; left:100px;">');   

$('#third').append('<input type="submit">');
$('#third').append('</form>');

}

function powerInput(){ alert("test");
}

Answer 1

你附加的不正确，你不能将 html 标签的一部分附加到 dom 中，而是将整个代码附加到一个字符串中。按照您现在的方式，表单中将没有任何元素。

$('#third').append('<form onsubmit="powerInput()">' +
    '<span style="position:absolute; top: 10px; left: 50px;font-size: 200%">$${t}\\sqrt{t}$$</span>' +
    '<input type="text" name="fpower" maxlength="1" style="width: 10px; height:9px; position:absolute; top:27px; left: 60px;">' +
    '<input type="text" name="spower" maxlength="1" style="width: 10px; height:9px; position:absolute; top: 25px; left:100px;">' + 
    '<input type="submit">' +
    '</form>');