JavaScript的removeChild导致表单不能提交的问题

看下面的的代码:

<html>
	<head>
		<script src="jquery.js" type="text/javascript" ></script>
		<script language="JavaScript"> 
			//<![CDATA[
			function checkfields() { 
				document.AppForm.submit(); 
				return true; 
			} 
			var kvi = 0;
			function createTitleDescriptionInput() {
				var html = '<div id="optionpair'+ kvi +'" class="optionpair">' +
					'<span><label>Title:</label><input id="key'+ kvi +'" name="title" type="text" value="" /></span>' +
					'<button onclick="return removeTitleDescriptionInput('+ kvi +')" >Remove</button>' +
					'</div>';
				$("#optionattributes").append(html);
				kvi++;
				return false;
			}
			//]]>
			function removeTitleDescriptionInput(x) {
				$("#optionpair" + x).remove();
				return false;	
			}
		</script>
	</head>
	<body>

		<form id="appform" name="AppForm" method="post" action="#" enctype="multipart/form-data">
			<div id="optionattributes"></div>
			<button onclick="return createTitleDescriptionInput()">Add Option</button>
		</form>
		<a onclick="return checkfields();" href="javascript:void(0)">SAVE</a>
	</body>
</html>

实现浏览器内添加删除行功能,页面效果如下:




问题来源:无论在FireFox和IE下,只要点击remove按钮后,再点save链接时,网页不提交,也没有任何出错提示

解决步骤一:
将checkfields()函数的return true改成return false,结果是IE可以工作,但是FireFox下仍然不工作

解决步骤二:
使用<input type="button" 全面替换<button

潜在的解决方案可能包括:
坚持使用Button,但是必须使用DOM函数appendChild来增加新行。另外button增加属性type="button"

你可能感兴趣的:(JavaScript,html,浏览器,IE,firefox)