Jquery没有添加新的引导表

时间:2016-12-10 16:44:15

标签: javascript jquery html css web

我的Html

这些是我的文件我不知道我在哪里做错了但每当我点击添加按钮它没有创建其他列表



<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

 </head>
<body>
    <ol>
    <li>
    </li> 
    </ol>
<button id="add">Add</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="Project.js"></script>
    
</body>
</html>
&#13;
&#13;
&#13;

我的JS文件

&#13;
&#13;
$(document).ready(function () {
    $("#add").click(function(){
        $("ol").append("<li></li>");
    });
});
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

要按ID选择元素,您必须在符号$("#add")之前添加符号#,而不是$("add")

答案 1 :(得分:0)

您的project.js已使用jQuery synax '$',但jQueryproject.js已包含在jQuery之后,请在project.js <!DOCTYPE html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <ol> <li> </li> </ol> <button id="add">Add</button> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="Project.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html> 个链接>

#

还会在$('#add')

上引用带有$(document).ready(function () { $("#add").click(function(){ $("ol").append("<li></li>"); }); }); 符号的添加按钮
/var/www/.htaccess

https://jsfiddle.net/juw8yujq/2/

答案 2 :(得分:0)

add是一个ID。将$(&#34; add&#34;)更改为$(&#34; #add&#34;)

&#13;
&#13;
$(document).ready(function () {
    $("#add").click(function(){
        $("ol").append("<li></li>");
    });
});
&#13;
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

 </head>
<body>
    <ol>
    <li>
    </li> 
    </ol>
<button id="add">Add</button>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
</body>
</html>
&#13;
&#13;
&#13;