ansaurus

Question

Changed the HREF of a link w/JQuery, new link won't work.

Answer 1

A:

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;
});

cletus 2010-08-06 01:57:14

Maybe I should have explained it better: on the first click I don't want the user navigated to the off-site link – only the action on the page to be performed. On the second click (after `class="dummy"` has been removed), I want the link to be navigated to.

poisontofu 2010-08-06 02:05:46

@poisontofu see update

cletus 2010-08-06 02:32:51

Thanks. `live()` does the trick (allowing the user to cycle through the links several times before navigating to one). I didn't know about the concept of binding in JS.

poisontofu 2010-08-06 02:41:17

Answer 2

+1 A:

After you change the href the click handler is still attached. Since you're returning false it stops the link navigation. If you just remove the handler with unbind('click') after the first click it will work.

takteek 2010-08-06 01:59:20

Indeed, so use the jQuery "one" function to bind your click event so it only fires once. See here: http://api.jquery.com/one/

Ryley 2010-08-06 02:01:35

But once `class="dummy"` is removed, shouldn't the links function as normal since they would no longer selected by `$('a.dummy').click(function(){` ?

poisontofu 2010-08-06 02:02:03

Oops, I forgot about one(). It would be much cleaner to use that instead of unbind.

takteek 2010-08-06 02:02:45

@poisontofu The selector is only relevant when you first bind the handler. The handler will remain even if the criteria you used to initially bind it are no longer valid.

takteek 2010-08-06 02:03:56

@Ryley - Write an answer and I'll vote for it.

Gert G 2010-08-06 02:13:59

one() works if a user clicks an option then immediately clicks it again, but not if they cycle through all three links then go back to the first. Is there a way around this?

poisontofu 2010-08-06 02:29:46

ansaurus

tags:

views:

answers:

Changed the HREF of a link w/JQuery, new link won't work.

related questions