javascript - jquery 函数 onclick 事件没有被调用

Question

在下面的代码片段中 -

<div class="w3-row" >
    <div class="w3-col"></div>
    <div class="w3-col" style="vertical-align:center;text-align:center;font-size:23px;padding-top:25px;padding-bottom:25px;" >

        <script>
        $(document).ready(function(){
            $("#pru-exam-timer").click(
                function(){
                    startRealTest();
                });
            });
        </script>

        <!--<button id="pru-exam-timer" onclick="startRealTest();return false;" type="button" class="btn btn-info">Start Real Test</button>-->
        <input id="pru-exam-timer" type="submit" value="Start Real Test">
    </div>
    <div class="w3-col" style="vertical-align:center;text-align:center;font-size:23px;padding-top:25px;padding-bottom:25px;">
        <!--<button type="button" class="btn btn-info">Start Mock Test</button>-->
    </div>
    <div class="w3-col"></div>
</div>

函数 startRealTest() 被正确调用，但当我将标签内的代码移动到单独的 .js 文件时，它根本没有被调用。另外，值得注意的是，当我通过按钮行调用 startRealTest() 函数时，它会被正确调用(即使它位于单独的 .js 文件中)

请指点一下，这里可能出了什么问题。

Answer 1

您的脚本将在标签加载之前加载。所以在加载时没有指定 ID 的标签。因此它不起作用。

<div class="w3-row" >
<div class="w3-col"></div>
<div class="w3-col" style="vertical-align:center;text-align:center;font-size:23px;padding-top:25px;padding-bottom:25px;"/>
<input id="pru-exam-timer" type="submit" value="Start Real Test">
</div>
<div class="w3-col" style="vertical-align:center;text-align:center;font-size:23px;padding-top:25px;padding-bottom:25px;">
</div>
<div class="w3-col"></div>
<script>
    $(document).ready(function(){
        $("#pru-exam-timer").click(
            function(){
                startRealTest();
            });
        });
   </script>
 </div>`

请尝试上面的代码片段。它会起作用