jquery call is not being done

Question

The following jQuery call is not being done:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
  $('#links').click(function(){
    alert($(this).attr('href'));
  });
    </script>
<a id="links" href="http://www.amazon.com" >Amazon</a>

EDIT:

Also not working with:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

We don't like to add it <script src="http://code.jquery.com/jquery-latest.min.js"></script> because jquery versions may not be updated in this file but all code works if we add this.

The above code also not getting desired result if we add it inside

$(document).ready(function() {
  $('#links').click(function(){
    alert($(this).attr('href'));
  });
});

Your problem is highlighted here https://jsfiddle.net/s6e8rjL0/ - try changing in the *JAVASCRIPT* setting from `LOAD TYPE` - `No wrap - in ` to `No wrap - in ` and your script works. It is as simple as ensuring your content is loaded before the script runs. — Jonathan, Jul 24 '16 at 15:48
@MuhammadMuazzam would have answered with community wiki as this is a very common question on SO. Have a look at that fiddle. Inspect the HTML quadrant and find the ``. Then look at the difference between the in-head and in-body load type. With your script in the head, you can't know what is yet in the body, and so the script finds nothing. Just before the body-close, the script comes after what was loaded, and has access to it. — Jonathan, Jul 24 '16 at 15:59
I just changed jquery source to: "http://code.jquery.com/jquery-latest.min.js" and it works — Muhammad Muazzam, Jul 24 '16 at 16:00
@MuhammadMuazzam [Don’t Use jquery-latest.js](https://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/) — GSerg, Jul 24 '16 at 16:02
@GSerg I have followed thread marked as duplicate by you. What is the reason for not using it? — Muhammad Muazzam, Jul 24 '16 at 16:05
@MuhammadMuazzam Click the link to read why. The point was to use `$(function(){})`, not a specific jQuery version. — GSerg, Jul 24 '16 at 16:07
@MuhammadMuazzam it's never a good idea to make production apps that depend on code that is a work-in-progress. Latest implies that it is the cutting-edge, experimental version. But as that article says - they have since frozen it at 1.11.1 anyway, to sidetrack this issue — Jonathan, Jul 24 '16 at 16:09
@MuhammadMuazzam Why do you want this question reopened? It is not relevant what jquery version the previous OP used, it's only relevant the solution is to [use `.ready`](http://stackoverflow.com/a/18602361/11683) in one form or another. — GSerg, Jul 24 '16 at 16:24
@GSerg Not working in $(document).ready(function() {}); block. — Muhammad Muazzam, Jul 25 '16 at 06:10
@MuhammadMuazzam The please edit your question with your current actual code where you are using `.ready`, then we shall reopen it. — GSerg, Jul 25 '16 at 16:19

score 0 · Answer 1 · answered Jul 24 '16 at 15:32

<a id="links" href="http://www.amazon.com" >Amazon</a>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
  $('#links').click(function(){
    alert($(this).attr('href'));
  });
</script>

The id links must exists before referring it.

You can also use the ready function of jQuery:

$( document ).ready(function() {
  $('#links').click(function(){
    alert($(this).attr('href'));
  });
});

score 0 · Answer 2 · answered Jul 24 '16 at 15:38

Your anchor is not ready yet, because your DOM is not ready yet,

you should wrap your script in document ready function, then it will work.

$(function(){
$('#links').click(function(){
        alert($(this).attr('href'));
      });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <a id="links" href="http://www.amazon.com" >Amazon</a>

jquery call is not being done

2 Answers2