Question

index.php中的这段代码和test（），它在test.js中定义，在浏览器中生成所需的警报：

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

但是，当我移除<script>标记中的内容并将onclick属性添加到<div>时，看起来像

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

代码不再起作用 - test（）函数没有运行，但没有产生错误。

为什么？

UPD：

test（）函数在test.js
test.js中的代码：

var test = function（）{ 警报（＆＃39;工程＆＃39;！）;
};

Answer 1

帖子中有一个帖子，由于某种原因被删除了。建议是在HTML中明确说明javascript:test()。

完成div的html：

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

这解决了问题，外部.js现在显然已被正确引用。

这是我学到的非常有价值的东西！

Answer 2

在DOM准备好之前，可能无法加载外部.js文件。所以找不到测试功能

如果由于某种原因无法使用jquery，则应使用jquery ready调用，或使用jQuery.holdReady（）。（Reference）

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

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

2 个答案: