JQuery .load - 当调用按钮位于表单标签内时无法工作

Question

JQuery .load - 当调用按钮位于表单标签内时无法工作

3

我有一个简单的 JQuery load 语句在一个函数中[忽略命名]。按照它的呈现方式，它无法工作。当表单标记被移除时，它可以工作。希望您能解释为什么会发生这种情况。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML 5 Document</title>

<script type="text/javascript"  src="../js/jquery-1.8.3.js"></script>

<script type="text/javascript" >

$("document").ready(function() {

$('#getCalc').bind('click' , getPlainHTMLfromServer );
}); // end ready

function getPlainHTMLfromServer() {
$('#content').load("plainHTML.html");

}// end getPlainHTMLfromServer()

</script>
</head>

<body>
<div id="content"></div>
<form>
<button id="getCalc">Double</button>
</form>
</body>
</html>

- user1917663

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ram · Accepted Answer

您应该阻止提交事件的默认操作，默认情况下按钮的类型属性是 submit：

function getPlainHTMLfromServer(event) {
   event.preventDefault();
   $('#content').load("plainHTML.html");
}

或者将type='button'属性添加到按钮元素:

<button id="getCalc" type="button">Double</button>