0

I have a web application that exclusively uses AJAX so there are no full refreshes and everything is set up as 

<a href="javascript:...()">

It works really well on Chrome and Firefox but IE asks to confirm the page reload every time I click on anything. Would it be better to change the links to

href="#"

and make the functionality into onClick?

Thanks.

user988129
  • 73
  • 2
  • 3
  • 10

3 Answers3

2

Just stop using inline javascript all together. You don't need it.

Output the id associated to the element in a data attribute:

<a href="#" data-id="34" class="list-item">listitem1</a>

Now you can bind to those click events from an external js file:

$(document).ready(function(){
    $(".list-item").click(function(e){
        e.preventDefault(); // stop jump to top
        var theId = $(this).attr("data-id"); // get the id
        someFunction(theId); // execute some terribly written function
    });
});

This does work cross-browser.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
0

With "href='#'" you will probably need to preventDefaults on your JS function so the page doesn't go to top because of the '#' anchor.

I would do:

HTML

<a href="javascript:void(0)" class="someclass" rel='2'>

JS

$('.someclass').on('click', function(){
   var value = $(this).attr('rel');
   // use 'value' as you would normaly do with your function(2)
});

Or this one:

HTML

<a href="#" class="someclass" rel='34'>

JS

$('.someclass').on('click', function(e){
    e.preventDefault();

   var value = $(this).attr('rel');
   // use 'value' as you would normaly do with your function(34)
});
Felipe Skinner
  • 16,246
  • 2
  • 25
  • 30
  • that would work except i have a list of items that are all calling the same function, as in lissitem1 - function('1'), listitem2 - function('2'), etc... – user988129 Sep 03 '13 at 20:43
  • @user988129 Sounds like you could use the index+1 rather than hardcoding the id. or modify the so-called `function` to work properly based on the clicked element rather than an arbitrary number. – Kevin B Sep 03 '13 at 20:47
  • the parameters wont necessarily match the id though - the html generated may be listitem1 - function('34') listitem2 - function('2'). sorry to be a pain... – user988129 Sep 03 '13 at 20:50
  • Right... but having to do it that way just screams bad programming. that sounds terrible to maintain. – Kevin B Sep 03 '13 at 20:52
  • You could put the value in some dumb html attribute like "rel='1'"... So you could get those values with $(this).attr(rel) – Felipe Skinner Sep 03 '13 at 20:54
  • I edited the code to exemplify what i mean. Thats a little ugly but I couldnt come up with a better idea at the moment – Felipe Skinner Sep 03 '13 at 20:57
-1

Use <a href="#" onclick="myFunction()"></a>.

Also, make sure that in your javascript function you stop the event from propagating like this: 

function myFunction() {
    //Your code here
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    return false;
}



This will stop the browser from jumping to the top of the page and is IE compatible, since IE does not use event.preventDefault()

AxiomaticNexus
  • 6,190
  • 3
  • 41
  • 61