Home/ Questions/Q 967631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T02:21:01+00:00

I’m fairly new to JQuery and Javascript in general. I don’t think I’m trying

  • 0

I’m fairly new to JQuery and Javascript in general. I don’t think I’m trying to do anything too tricky, but this has me stumped.

I have a series of links on my page which trigger a certain behaviour within the page when clicked. Once they are clicked again, they are supposed to jump to another page, but, using my current code, they don’t do anything.

I’m guessing there’s a really simple workaround to this problem, but I can’t figure it.

I’ve put up a bare-bones example (displaying the same problems) here: http://jsbin.com/egaji3/edit. Code is also pasted below.

JS:

$('a.dummy').click(function(){
  var myquery = $(this).attr('title');
  $('p#output').text('You clicked on the ' + myquery + '. Click again to Google it.');
  $('a').addClass('dummy');
  $('a').attr('href', '#'); 
  $(this).removeClass('dummy');
  $(this).attr('href', 'http://www.google.com.au/#q=' + myquery); 
  return false;
});
​

HTML:

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  a { color: #00f; background: #ff0; }
  a.dummy { color: #999; background: none; }
</style>
</head>
<body>
  The things: 
  <a class="dummy" href="#" title="first thing">First Thing</a>
  <a class="dummy" href="#" title="second thing">Second Thing</a>
  <a class="dummy" href="#" title="third thing">Third Thing</a>  
  <p id="output">You haven't clicked anything yet!</p>
</body>
</html>

​

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have further explained that you want the first click to set the link and the second to navigate to it.

    Your problem then is that when you bind the event handler, it stays bound even though you’ve removed the dummy class. Simplest solution is simply to use live() instead:

    $("a.dummy").live("click", function() {
  var myquery = $(this).attr('title');
  $('p#output').text('You clicked on the ' + myquery + '. Click again to Google it.');
  $('a').addClass('dummy');
  $('a').attr('href', '#'); 
  $(this).removeClass('dummy');
  $(this).attr('href', 'http://www.google.com.au/#q=' + myquery); 
  return false;
});

    bind() (as implicitly called from click() is a static binding. live() updates so once you remove the dummy class, the event handler will no longer be called.

    An alternative approach is to use one(), which is called but once:

    $("a.dummy").one("click", function() {
  var myquery = $(this).attr('title');
  $('p#output').text('You clicked on the ' + myquery + '. Click again to Google it.');
  $('a').addClass('dummy');
  $('a').attr('href', '#'); 
  $(this).removeClass('dummy');
  $(this).attr('href', 'http://www.google.com.au/#q=' + myquery); 
  return false;
});
    • 0