0

I have code that loads image from another page using Jquery and Ajax.

$('a').click(function(){
$('<div id="smiley">').load("ajax.html img",function(){
$(this).hide().appendTo('#new').fadeIn()}); 
return false;                   
})

However, there are two problems: 1. I cant stop link from opening other links on page in the same time (even I do a#box or something like that.) 2. Images keeps loading every time I click a link.I tried return false,*preventDefault* but nothing seems to work. Any idea?

Thanks Miro

Miroslav Trninic
  • 3,327
  • 4
  • 28
  • 51
  • Is there a reason why the url param of load is not a properly formed url? "ajax.html img" – Craig Dec 30 '11 at 12:25

3 Answers3

0

We know the return false and preventDefault() just prevent the default behavior of the dom, for example the default behavior that linking to the other page when click the a tag <a href="other.html">. However ,it can't prevent the DOM Event listener callback, like:

$('a').on('click', function(event){
    event.preventDefault();
    doSomething();
    return false;
});

the code can prevent the default behavior of the clicked dom, but can't cancel the execution of the doSomething().

JiangangXiong
  • 2,326
  • 1
  • 12
  • 14
0

Problem 1 is solved by setting the href attribute of your a tag to: href="javascript:void(0);

Problem 2 is solved by adding an id, such as id="img_loager" to the one tag you want to have this behavior, and then changing your click assignment to:

$("#img_loader").click(function(){...

Right now you're assigning the behavior to all a tags. Return false and prevent default will only stop an event from propagating to it's target's parents. :)

RSG
  • 7,013
  • 6
  • 36
  • 51
  • We don't have all the info. I'm speculating that carousel has several a tags, with only one that should append the smiley image. I suspect that that tag has a valid href- that's how I understood the description of problem 1. Problem 2 refers to the click listener mistakenly causing every link to load the smiley. I think. – RSG Dec 30 '11 at 12:34
  • Maybe I am missing something...but `return false` or `preventDefault` OR your solution of calling void in the href should all work and that's why I was thinking there is another problem here. – Craig Dec 30 '11 at 12:39
  • You're right- it should solve problem 1. I use the explicit void out of habit: http://stackoverflow.com/questions/134845/href-for-javascript-links-or-javascriptvoid0 – RSG Dec 30 '11 at 12:46
  • I've read that post, but I typically don't use the void method call. – Craig Dec 30 '11 at 12:47
  • In all fairness, I may just not understand the question. If the URL is set correctly in the load method and they want to keep appending the image to the element with the id `new` then their code should work fine. – Craig Dec 30 '11 at 12:57
-1

remove the href attribute and apply a text-decoration style

<a style="text-decoration: underline;" title="click me"></a>

here's a related question: HTML Divs show/hide issue

Community
  • 1
  • 1
stackuser10210
  • 352
  • 1
  • 5
  • 11
  • i dont know why that's a -1. as i mentioned in the other question, removing the href makes more sense than having an href you dont want, only to block its normal operation later. not that the question isnt a little ambiguous : ) – stackuser10210 Dec 30 '11 at 12:43
  • -1 because this changes the behavior of the anchor tag and it would no longer be focusable. Though it would still be clickable, it would not be able to receive the focus. It would make more sense to change it to a `span`. I believe that his problem is elsewhere...but I am prepared to eat my words...it wouldn't be the first time :-) – Craig Dec 30 '11 at 13:06
  • One other thing is that the markup you provided will not display the cursor as a pointer...though you could easily add `cursor:pointer` to your styling. – Craig Dec 30 '11 at 13:16
  • id agree on using a span instead, except that anchors offer cross-browser :hover styling where other elements dont (eg, the increasingly obscure ie6). that, and a title attribute for tool tips. i say an href attribute should either be valid, ie, a reference that youre happy to have used in place of the click event if javascript's not available, or it shouldnt be used at all. using href for no purpose other than to force link styling seems like a hack to me. – stackuser10210 Dec 30 '11 at 13:48
  • 1
    I'll remove the downvote because I guess it is somewhat a matter of opinion but I still strongly disagree. I don't believe that this is a matter of styling but a matter of usability as removing the `href` also removes the ability of that element to receive the focus which I feel is a greater hack. Also, most modern browsers now support the `:hover` pseudo class. Forgot I can't change my vote unless the answer is changed. – Craig Dec 30 '11 at 14:17
  • dont worry, im not bothered about a -1 : ). it'd be nice to reach a consensus. the focus issue could be resolved by setting a tab index. but then, if we're looking at tabs and focus, an onclick event isnt going to be enough to intercept the href. – stackuser10210 Dec 30 '11 at 14:42
  • The "how to" get something done in the developers world is rarely black and white so sometimes a consensus doesn't materialize. I'll continue to think about your suggestion. Hope you're having a great holiday :-) cheers – Craig Dec 30 '11 at 14:57