我尝试使用http://jsfiddle.net/pixelentity/aABLD/24/创建 Jquery 动态, 并且创建了我的 html 文件。但它不起作用,这意味着它显示 html 页面但单击添加按钮时不显示动态表单。这是我的代码
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
jQuery(function($) {
var multiTags = $("#multi");
function handler(e) {
var jqEl = $(e.currentTarget);
var tag = jqEl.parent();
switch (jqEl.attr("data-action")) {
case "add":
tag.after(tag.clone().find("input").val("").end());
break;
case "delete":
tag.remove();
break;
}
return false;
}
function save(e) {
var tags = multiTags.find("input.tag").map(function() {
return $(this).val();
}).get().join(',');
alert(tags);
return false;
}
multiTags.submit(save).find("a").live("click", handler);
});
</script>
<style type="text/css">
form {
font-family: helvetica, arial, sans-serif;
font-size: 11px;
}
form div{
margin-bottom:10px;
}
form a {
font-size: 12px;
padding: 4px 10px;
border: 1px solid #444444;
background: #555555;
color:#f7f7f7;
text-decoration:none;
vertical-align: middle;
}
form a:hover{
color:#ffffff;
background:#111111;
}
#multi label {
margin-left:20px;
margin-right:5px;
font-size:12px;
background:#f7f7f7;
padding: 4px 10px;
border:1px solid #cccccc;
vertical-align: middle;
}
#multi input[type="text"]{
height:22px;
padding-left:10px;
padding-right:10px;
border:1px solid #cccccc;
vertical-align: middle;
}
#multi input[type="submit"]{
margin-left:20px;
border:none;
background:#222222;
outline:none;
color:#ffffff;
padding: 4px 10px;
font-size:12px;
}
</style>
</head>
<body>
<form id="multi">
<div>
<label>Tag</label><input class="tag" type="text" name="" type="text" />
<a href="#" data-action="add">add</a>
<a href="#" data-action="delete">delete</a>
</div>
<input type="submit" value="save" >
</form>
</body>
</html>
` 我的代码有什么问题?有人可以帮忙解决这个问题吗?