在.php页面上使用外部.js文件

Question

This code in index.php works and test(), which is defined in test.js produces the desired alert in the browser: index.php中的以下代码可以工作，并且在test.js中定义的test（）可以在浏览器中生成所需的警报：

<?php 
    #include ('db.php');
    #$dataBase = new PDO("mysql:host=$dbHost;dbname=$dbName", $dbUser, $dbPass);    
    #PREPARE AND TRY    
    #$statement = $dataBase->query('SELECT * FROM users');
    #$rowCount = $statement->rowCount();
    #echo 'There are currently ' . $rowCount . ' rows in the database'; 
?>
<HTML>
    <HEAD>
        <meta charset="utf-8">
        <TITLE>title</TITLE>
        <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="ui/jquery-ui/jquery-ui.min.js"></script>
        <script type="text/javascript" src="test.js"></script>
        <link rel="stylesheet" type="text/css" href="test.css" />
        <link rel="stylesheet" href="ui/jquery-ui/jquery-ui.min.css" /> 
        <link rel="stylesheet" href="styles/jquery-ui-config.css" />        
    </HEAD>
    <BODY>

        <div id = 'clickablebutton'>Button</div>

        <script>
        $(document).ready(function(){
            //console.log('self invoke on document ready');
            $('#clickablebutton').click(function(){
                test();  //alerts "it works"
            });
        </script>
    </BODY>
</HTML>

However, when I remove whatever is in <script> tag and add the onclick attribute to <div> to look like 但是，当我删除<script>标记中的所有内容并将onclick属性添加到<div> ，如下所示：

<div id = 'clickablebutton' onclick='test()'>Button</div>

the code does not work anymore - test() function is not run, yet no error are produced. 该代码不再起作用-未运行test（）函数，但未产生任何错误。

Why? 为什么？

UPD: UPD：

test() function is in test.js test（）函数在test.js中
code in test.js: test.js中的代码：
var test = function(){ alert('Works!'); var test = function（）{alert（'Works！'）;
}; };

Answer 1

There was a post in the thread, which for some reason got deleted. 该线程中有一个帖子，由于某种原因被删除。 The suggestion was to explicitly state javascript:test() in the HTML. 建议在HTML中明确声明javascript:test() 。

Complete html for the div: 完成div的html：

<div id = 'clickablebutton' onclick='javascript:test()'>Button</div>

This solved the problem and external .js is now apparently referenced correctly. 这解决了问题，并且现在显然已正确引用了外部.js。

This is something very valuable I have learned! 这是我学到的非常有价值的东西！

Answer 2

The external .js file might not be loaded before the DOM is ready. 在DOM准备就绪之前，可能不会加载外部.js文件。 So it can't find the test function 所以找不到测试功能

You should either use jquery ready call, or use jQuery.holdReady() if you can't use jquery ready for some reason. 您应该使用jquery ready调用，或者如果由于某种原因无法使用jquery ready，请使用jQuery.holdReady（）。 ( Reference ) （参考）

$.holdReady( true );
$.getScript( "test.js", function() {
  $.holdReady( false );
});

在.php页面上使用外部.js文件

问题描述

2 个解决方案

解决方案1
0 2016-05-19 10:50:09

解决方案2
0 2016-05-19 10:50:19

在.php页面上使用外部.js文件

问题描述

2 个解决方案

解决方案1 0 2016-05-19 10:50:09

解决方案2 0 2016-05-19 10:50:19

解决方案1
0 2016-05-19 10:50:09

解决方案2
0 2016-05-19 10:50:19