Changing a link in jQuery via Ajax

Question

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.

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)`. — yoozer8, Nov 15 '12 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? — nnnnnn, Nov 15 '12 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. — doubleplusgood, Nov 15 '12 at 21:00

score 1 · Answer 1 · edited May 23 '17 at 12:04

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.

edited May 23 '17 at 12:04

Community

1
1

answered Nov 15 '12 at 20:51

Michal Klouda

14,263
7
53
77

score 1 · Answer 2 · answered Nov 15 '12 at 20:53

// 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).

score 1 · Answer 3 · answered Nov 15 '12 at 21:03

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.

Changing a link in jQuery via Ajax

3 Answers3