除非把它放在html文件中,否则无法调用外部js函数

时间:2015-02-14 07:08:18

标签: javascript

我无法调用外部javascript函数。 在我的HTML中:

 <p>  <a id="delete" href="/some/url/">Delete</a> </p>

我想在删除之前确认。如果我把代码放在html文件中,它可以工作:

 <script>
var test = document.getElementById("delete");
test.onclick = function popup(){return confirm("Are you sure?")};
</script>

但是,如果我将popup()函数放在外部js文件中并包含使用&#34; src = / path / to / external.js&#34;,则该函数无法找到,也无法再弹出窗口。

我很确定我输入了外部js的正确路径,因为我可以在html页面源代码中打开js文件。此外,如果我在本地使用jquery.js文件,它将无法工作,但如果我使用谷歌CDN提供的jquery.js,它的工作原理。我完全迷失了。为什么会这样?

2 个答案:

答案 0 :(得分:1)

因为执行代码时HTML元素可能不在页面上。 使用以下:

window.onload=function(){
  var test = document.getElementById("delete");
  test.onclick = function popup(){return confirm("Are you sure?")};
};

答案 1 :(得分:1)

您需要确保在执行JS时,DOM中存在#delete元素。

为此,您只需在</body>之前添加 .js 文件。

如果您想在</head>之前添加它,那么您应该在DOM准备好之后(在DOMContentLoaded事件上或之后的window.onload)触发事件绑定,因为JS已执行一旦下载,并且当时<body>尚未呈现,document.getElementById("delete")将为null


如果要分离事件侦听器,可以尝试使用以下代码:

function popup(){return confirm("Are you sure?")}
test.onclick = popup; // Attention! Without brackets here.