javascript - 为什么这个 html 不起作用

标签 javascript jquery html xml

我有这么一小段代码:

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

<script type="text/javascript">
    $("#term").autocomplete({
      source: function(request, response) {
        $.ajax({
          url: 'http://query.yahooapis.com/v1/public/yql',
          dataType: 'JSONP',
          data: {
            format: 'json',
            q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q=' + encodeURIComponent(request.term) + '"'
          },
          success: function(data) {
            response($.map(data.query.results.toplevel.CompleteSuggestion, function(item) {
              return { label: item.suggestion.data, value: item.suggestion.data };
            }));
          }
        });
      }
    });
</script>

</head>

<body>

  <label for="term">Search term: </label>
  <input id="term" />

</body>
</html>

它在 JsBin 上在线运行良好:JsBin preview

但是,当我将代码复制到桌面以便我可以使用它时,它不起作用(但它曾经可以工作)我做错了什么??为什么除了在线之外这不起作用??

最佳答案

尝试将 javascript 代码包装在就绪处理程序中,jsbin 会自动完成

$(document).ready(function(){

//your code here
});

或捷径

$(function(){

//your code here
});

这将在 DOM 完成加载后执行脚本,或者作为替代方案,您可以将 javascript 放在文档的末尾,以便在 DOM 加载后执行它

关于javascript - 为什么这个 html 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8960239/

相关文章:

javascript - 如何用 javascript 和 jQuery 总结几列?

javascript - 如何使用 javascript 设置动态创建的按钮的样式?

javascript - 如何高亮显示当前页面的菜单链接?

javascript - 每次我调用它的twig模板时执行javascript

javascript - 使用 JSDOM 模拟上线/下线

javascript - 从 http get 请求 Angular7 获取结果

javascript - 当我添加应成为新 ':last' 的新元素时,jQuery 单击事件不会更新 ":last"

javascript - 我如何在react js中访问nextjs中_app.js文件中的上下文

javascript - 使用 jquery 更改 css 而不会出现任何过渡

javascript - 在 Bootstrap 中单击时更改按钮的颜色