0

I'm using jquery to bind some click events on a link. Using, the following code I have been able to change the link's href via ajax - but when the href changes and I try to click the link, nothing happens.

Wondering if anyone can spot an obvious error that I am missing.

    $('a.shortlist_action').bind('click',function(){

        item = $(this);
        href = item.attr('href');

        parent = $(this).parent('.shortlist_action_container');
        item = $(this);

        $.ajax({
          url: $(this).attr('href'),
          success: function(data) {
                item.addClass('largeviewplannerbutton');

                item.attr("href", '/myaccount/planner');
            }
          }

        });
        // stop event propagation here
        return false;
});

Thank you.

Improve this question
3
  • Not an answer, just some notes. You've got item = $(this); twice, and you probably want to use url: href rather than url: $(this).attr(href). Commented Nov 15, 2012 at 20:52
  • Is the idea that the first click on the link will do the Ajax and change the href, then second and subsequent clicks will actually navigate to the new URL without further Ajax? Isn't that a bit confusing for the user? Commented Nov 15, 2012 at 20:56
  • Hi, people will click the link to add the item to a list like a bookmark. Once they've clicked the link, the button will then change to a 'view list' button. Commented Nov 15, 2012 at 21:00

3 Answers 3

Reset to default
1

Remove return false, which is preventing event propagation as your comment suggests..

See When and why to 'return false' in javascript? for more details.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1 
// stop event propagation here
return false;

return false prevents both propagation and the default bahviour. The latter is following the hyperlink for an <a href> element. You should really only call e.stopPropagation() here (and define e in the function signature).

Improve this answer

Comments

1

As already noted, return false in a jQuery event handler prevents the default behaviour for that event, where of course the default behaviour for clicking on a link is to navigate to the URL in the link's href.

So with your current code, each click makes an Ajax call to the URL in the current href, with no default navigation. I.e., the first click on the element makes an Ajax call to the original URL, then changes the URL. No default navigation. The second click then makes an Ajax call to the new URL, but again no default navigation.

If the idea is that only the first click should do the Ajax and update the href, and second and subsequent clicks will just do standard navigation to the new URL, then you should use the .one() method instead of .bind(). The .one() method binds an event handler that will run only once per element.

Alternatively you'd need to add some additional logic inside your function to decide whether or not to change the href and whether or not to return false to cancel the default click behaviour. And/or possibly add a call to .off() (or .unbind()) to remove the click handler once you no longer need it for a particular link.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.