Question

即使我已经加载了jquery，我的代码也没有响应。但我的JSfiddle工作正常。请帮助我，我错过了哪里。在firefox控制台上没有捕获到错误。我无法弄清楚我错过了哪里。我是js和jquery的新手 JS小提琴设置位于http://jsfiddle.net/3Wdr3/1/

    <html>
<head>
 <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
</head>
<body>
<script type="text/javascript">

var counter = 2;
var availableTags = [
 "ActionScript",
 "AppleScript",
 "Asp",
 "BASIC",
 "C",
 "C++",
 "Clojure",
 "COBOL",
 "ColdFusion",
 "Erlang",
 "Fortran",
 "Groovy",
 "Haskell",
 "Java",
 "JavaScript",
 "Lisp",
 "Perl",
 "PHP",
 "Python",
 "Ruby",
 "Scala",
 "Scheme"];
$("#addButton").click(function () {
 var newTextBoxDiv = $(document.createElement('div'))
  .attr("id", 'TextBoxDiv' + counter);

 var roleInput = $('<input/>',{
  type:'text',
  placeholder:'Role',
  name:'Role'+counter,
  id:'textbox' + counter
 });

 var searchInput = $('<input/>',{
  type:'text',
  placeholder:'search',
  name:'search'+counter,
  id:'se' + counter
 });

 var hidd=$('<input/>',{
  type:'hidden',
  name:'searchhid'+counter,
  id:'searchhid' + counter
 });


 newTextBoxDiv.append(roleInput).append(searchInput).append(hidd);
 newTextBoxDiv.appendTo("#TextBoxesGroup");
 $('#se' + counter).autocomplete({
  source: availableTags
 });
 counter++;
});
</script>
<div id='TextBoxesGroup'>
 <div id="TextBoxDiv1" class="form-inline control-group">
  <input type='button' value='Add' id='addButton' />
 </div>
</div>
</body>
</html>

Answer 1

确保在dom ready状态下包装对jQuery的调用。

$(function() {
   $("#addButton")...
});

JSFiddle为你做这件事。

这很重要，因为其他元素还没有在dom中。因此，当您尝试使用jQuery选择它们时，它们不存在，并且您的脚本无法工作。

Answer 2

看到这个plunker你可能会理解为什么dom ready事件是必要的

（文档）$。就绪（函数（）{

//your js code

}）;

虽然在框架扩展中左侧的小提琴中，您可以看到它设置为onLoad，它会自动执行操作

我的JSFiddle工作但不在我的系统中

2 个答案: