【发布时间】：2014-04-16 16:32:02
【问题描述】：
代码
<!doctype html>
<html>
<head>
<meta charset = "utf-8"/>
<title>Icons</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src = "https://documentcloud.github.com/underscore/underscore-min.js"></script>
<style>
label {
font-size: 15px;
font-family: sans-serif;
position: fixed;
left: 50px;
padding-top: 8px;
}
</style>
<script>
$(document).ready(function(){
$("#editor").hide();
var files = [];
var docFileEXTs = ["docx", "txt", "doc", "docm", "dot", "dotx", "dotm"];
$("#newFolder").click(function(){
var folderName = prompt("Folder Name:");
if (folderName === null) {
} else if (folderName === "") {
alert("Folder name can't be empty!");
} else if (_.contains(files, folderName)) {
alert("That folder name is already taken.");
} else {
$("body").append('<label>' + folderName + '</label>');
$("body").append('<img class = "folder" src = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Folder-icon.png"/>');
$("body").append('<br/>');
files.add(folderName);
};
});
$("#newFile").click(function(){
var fileName = prompt("File Name:");
var icon;
if ($.inArray(fileName.split(".", 2)[1], docFileEXTs) !== -1) {
icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-icon.png";
} else {
icon = "http://www.iconarchive.com/icons/hopstarter/sleek-xp-basic/32/Document-Blank-icon.png");
};
if (fileName === null) {
} else if (fileName === "") {
alert("File name can't be empty!");
} else if (_.contains(files, fileName) {
alert("That file name is already taken.");
} else {
$("body").append('<label class = "file" index = "' + files.length + '">' + fileName + '</label>');
$("body").append('<img class = "file" src = "' + icon + '"/>');
$("body").append('<br/>');
files.add(fileName);
};
});
});
</script>
</head>
<body>
<input type = "submit" value = "New Folder" id = "newFolder"/>
<input type = "submit" value = "New File" id = "newFile"/>
<hr/>
</body>
</html>
详情
我的按钮不会响应我的 jQuery .click() 函数。应该发生的是单击按钮，弹出一个窗口，然后验证该名称是否可用。如果它可用，那么它会在屏幕上放置一个图标和一个标签。但现在它什么也不做。
JSFiddle：http://jsfiddle.net/5xQ3a/
注意：在 JSFiddle 中，我必须去掉 <!doctype html> 并将 JavaScript 和 CSS 放在单独的选项卡中。
现已完成！
【问题讨论】：
-
提交按钮会导致页面提交...如果您不希望他们提交，请使用按钮。
-
来自你的小提琴：
Uncaught SyntaxError: Unexpected token ) -
@epascarello 虽然我同意，但在这种情况下，页面上没有要提交的表单
-
点击这里，jsfiddle.net/Vinay199129/5xQ3a/8 现在修复其余代码 :)
-
这一行缺少
):} else if (_.contains(files, fileName) {
标签： javascript jquery html button click