jQuery函数onclick事件没有被调用

Question

In the following snippet -

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

The function startRealTest() is getting called properly but it is NOT getting called at all once I move the code within tags to a separate .js file. Also, it important to note that startRealTest() function is getting called properly(even when it is in a separate .js file) when I invoke it through button line

Any pointers please , what could be going wrong here.

Answer 1

Your Script is getting Loaded before the Tag is getting loaded. SO at the time of Loading there is no tag with specified ID. Hence it is not working.

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

Please try the above snippet.It will work

Answer 2

I think you have a syntax error in your js, the error is

Uncaught SyntaxError: Unexpected token )

You should do it like this:

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

Hope this helps!

Answer 3

I could make it work by including the tags as follows:

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

The file prudentquizy.js has jQuery(document).ready(function(){

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

This is perplexing because even earlier when I saw the html source it was there in the tag.