Question

I have the following HTML markup :

<a class="link1" href="javascript:load(0,1);">Click here</a><span class="loader"></span>

The load function is defined as follows :

function load(flag,id){

    /*Load Forum*/
    if(flag==0){
        $(this).next("span.loader").html("<img src='./images/loader.gif'/>");
    console.log("Here");
    //....Some code follows

So what I want is the preloader gif should appear beside the link when it is clicked. The ‘console.log’ is printing ‘Here’ to the console but the image is not appearing. The image is located at the correct address. I think there is problem in the way I am using the ‘this’ keyword. Any help would be appreciated. Thanks. 🙂

Updated: As it was pointed out by some, I passed reference to the element by passing this as an argument. Here is my code now but it does not work still :

<a class="link1" href="javascript:load(0,1,this);">Click here</a><span class="loader"></span>


function load(flag,id,ref){
/*Load Forum*/
if(flag==0){
    if(ref){ $(ref).next("span.loader").html("123");console.log("Here"); }

Answer 1

If you bind your event handler with jQuery instead of using the “href” (which is a really bad habit anyway), then your this value would be correct.

$(function() {
  $('a.link1').click(function(e) {
    e.preventDefault();
    if ($(this).data('flag') === '0') {
      $(this).next('span.loader').html('<img/>', { src: './images/loader.gif' });
      // ...
    }
  });
});

That also implies that the markup would change:

<a class='link1' href='#' data-flag='0'>Click here</a>

Binding the handler through jQuery means that the library will make sure that this refers to the element for which the handler is being invoked; that is, the <a> tag. The way you have it (with the “href” pseudo-URL), that would not be the case.