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中有语法错误，错误是

Uncaught SyntaxError：意外的令牌）

你应该这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助！

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源时它就在标签中。

jquery函数onclick事件未被调用

3 个答案: