空href导致document.ready被触发

Question

in reference to

Is an empty href valid?

in my case i was using an empty href and it was causing documents.ready to fire again. Here is my html:

<li><a onclick="numberOfmonthsToloadInDatabase(this)" href="" id="12Monat">12 Monat</a></li>

and when i removed it then it did not fire document.ready. I don't understand this behaviour, any explanation would be very helpful. i couldn't post it in the comments as i do not have enough points to add a comment on any post. Thanks.

Answer 1

From your example I have to question, why are you using a link tag? Since you only want the onclick event to fire you should use a span and eventually use css cursor:pointer; to give indication that it is clicable.

 function numberOfmonthsToloadInDatabase(evt) { alert("your clicked"); } 

 li span { cursor:pointer; } 

 <li><span onclick="numberOfmonthsToloadInDatabase(this)" id="12Monat">12 Monat</span></li> 

This way you prevent the default link behavior for when there is no URL specified. You have less work this way instead of using javascript preventDefault() to prevent the link from executing it's default behavior.

Answer 2

As other people have told you href causes page to reload, so you got the option to use href="javascript:void(0);" or href="#" in order to avoid the page to reload, if you want to keep the underlined link style you get when using href tag.

e.preventDefault() in the method won't work, because the parameter passed to the function isn't an event. It's the link element itself.

AFAIU you're trying to create some months option for your users. A more modern aproach would be to use data-something attributes. You could use them like this:

 function numberOfmonthsToloadInDatabase(link) { console.log(link.dataset.months); } 

 <li> <a onclick='numberOfmonthsToloadInDatabase(this)' href='#' data-months='12'> 12 Monat </a> </li> <li> <a onclick='numberOfmonthsToloadInDatabase(this)' href='#' data-months='10'> 10 Monat </a> </li>