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

请尝试上面的代码片段。

Answer 2

我认为您的js中存在语法错误，该错误是

未捕获到的SyntaxError：意外令牌）

您应该这样做：

 $(document).ready(function(){ $("#pru-exam-timer").click(function(){ alert('Its Working!'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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;" > <!--<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> 

希望这可以帮助！

Answer 3

我可以通过包含以下标签来使其工作：

  <script src="http:....assets/js/prudentquizy.js" type="text/javascript">       </script>
 <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>
</div>

文件prudentquizy.js具有jQuery（document）.ready（function（）{

            jQuery("#pru-exam-timer").click(
            function(){
                    startRealTest();    });
            });

这很令人困惑，因为甚至在我看到html源之前，它就在标记中。