Javascript 为什么在JSFIDLE上工作的代码不'；你不在本地工作吗？_Javascript_Jquery_Html_Jsfiddle

Javascript 为什么在JSFIDLE上工作的代码不'；你不在本地工作吗？

javascript jquery html

Javascript 为什么在JSFIDLE上工作的代码不'；你不在本地工作吗？,javascript,jquery,html,jsfiddle,Javascript,Jquery,Html,Jsfiddle,我从JSFIDLE获取了一个脚本，显然它可以工作，但是当我尝试在本地运行它时，它就停止工作了。我在另一个问题中读到，要使用JSFIDLE代码，我需要将脚本放入： $(document).ready(function() { }); 我这样做是为了下面的代码，但它甚至不起作用。有人能帮我吗 <html> <head> <style type="text/css"> li { border: 1px solid #ccc; margin-bottom:3px;

我从JSFIDLE获取了一个脚本，显然它可以工作，但是当我尝试在本地运行它时，它就停止工作了。我在另一个问题中读到，要使用JSFIDLE代码，我需要将脚本放入：

$(document).ready(function() {
});

我这样做是为了下面的代码，但它甚至不起作用。有人能帮我吗

<html> 
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}

button {
margin-left: 10px
}
</style>
<script type=”text/javascript”>


 $(document).ready(function() {

 $('#btnName').click(function(){
 var text = $('#inputName').val() + '<button>x</button>';
 if(text.length){
    $('<li />', {html: text}).appendTo('ul.justList')
}
});

$('ul').on('click','button' , function(el){
$(this).parent().remove()
});
});

</script>
</head>

<body>

<input type="test" id="inputName" />
<button id="btnName">Add</button>

<ul class="justList"></ul>

</body>
</html>


李{
边框：1px实心#ccc；
利润底部：3倍；
填充物：2px 5px；
}
钮扣{
左边距：10px
}
$（文档）.ready（函数（）{
$（'#btnName'）。单击（函数（）{
var text=$（'#inputName'）.val（）+'x'；
如果（文本长度）{
$（''，{html:text}）.appendTo（'ul.justList'）
}
});
$（'ul'）。在（'click'，'button'，函数（el）上{
$（this.parent（）.remove（））
});
});
添加

两个原因：

因为页面上没有包含jQuery。你需要

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>

都是花哨的引语。它们必须是正常的报价。或者，在最佳实践中，根本不包括

类型

；JavaScript是默认值

以合理、一致的方式格式化代码也是值得的

例如：


李{
边框：1px实心#ccc；
利润底部：3倍；
填充物：2px 5px；
}
钮扣{
左边距：10px
}
$（文档）.ready（函数（）{
$（'#btnName'）。单击（函数（）{
var text=$（'#inputName'）.val（）+'x'；
如果（文本长度）{
$（“”{
html：文本
}).appendTo（'ul.justList'）
}
});
$（'ul'）。在（'click'，'button'，函数（el）上{
$（this.parent（）.remove（））
});
});
添加

您缺少包含jQuery的脚本标记。假设错误是

$未定义

，jQuery未加载到您的页面中。@AdamAzad:没有任何错误，因为有漂亮的引号。什么也没发生，使得丢失的脚本更难诊断。@T.J.Crowder，的确，我错过了！很抱歉

<script type=”text/javascript”>

<html> 
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}

button {
margin-left: 10px
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {

     $('#btnName').click(function() {
         var text = $('#inputName').val() + '<button>x</button>';
         if (text.length) {
             $('<li />', {
                 html: text
             }).appendTo('ul.justList')
         }
     });

     $('ul').on('click', 'button', function(el) {
         $(this).parent().remove()
     });
 });
</script>
</head>

<body>

<input type="test" id="inputName" />
<button id="btnName">Add</button>

<ul class="justList"></ul>

</body>
</html>