Question

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

$(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>

Answer 1

有两个原因：

因为您没有在页面上包含jQuery。你需要
```
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
```
在script之前的某个地方（使用该路径或jQuery的其他有效路径）。
此处引用
```
<script type=”text/javascript”>
```
是花哨的报价。它们必须是正常的引号。或者，最佳做法，根本不包括type; JavaScript是默认值。

还值得以合理，一致的方式格式化代码。

E.g：

<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>

为什么在jsfiddle上运行的代码不能在本地工作？

1 个答案: