I have code like this

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>

func2 returns true or false. Then, func1 is called only when function2 returns true. Right ?

In learning jquery, I found out that onclick is not good and depreciated, so I modified above code to

<a id="id101" href="javascript:func1();">Link</a>

jquery
$("#id101").click(func2() {
  //same stuffs from before which was in func2
});

Now, my question is:

after click handler is taken care of, what can I do with JavaScript inside href? Should I call func1 inside func2 in jQuery click handler of func2, when condition inside func2 is true? Or is there some elegant solution?

Also, Separating html and events code is good, but here this element with id id101can have many events associated with it, and in a large file, there might be so many html elements with many events. So, when I have a large page with many event handlers, then how can I better know which html element has which and how many events associated with it?

More explanation to above question as requested,

I meant id101 can have onclick, onmouseover, onmouseout and many other such events. There can be many such elements with many such event handlers. How do I better spot them ? In old style, all such event handlers are all placed together, like this

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>.

I am not saying this is good, but atleast I can see that it has this onclick event. But now when separting this into jquery file, I have to search first this jquery file for id101 and then check events associated with it, which can be problem with html file having many elements and associated event handlers. Is there any better way to to find that information ?

I have code like this

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>

func2 returns true or false. Then, func1 is called only when function2 returns true. Right ?

In learning jquery, I found out that onclick is not good and depreciated, so I modified above code to

<a id="id101" href="javascript:func1();">Link</a>

jquery
$("#id101").click(func2() {
  //same stuffs from before which was in func2
});

Now, my question is:

after click handler is taken care of, what can I do with JavaScript inside href? Should I call func1 inside func2 in jQuery click handler of func2, when condition inside func2 is true? Or is there some elegant solution?

Also, Separating html and events code is good, but here this element with id id101can have many events associated with it, and in a large file, there might be so many html elements with many events. So, when I have a large page with many event handlers, then how can I better know which html element has which and how many events associated with it?

More explanation to above question as requested,

I meant id101 can have onclick, onmouseover, onmouseout and many other such events. There can be many such elements with many such event handlers. How do I better spot them ? In old style, all such event handlers are all placed together, like this

<a id="id101" href="javascript:func1();" onclick="return func2();">Link</a>.

I am not saying this is good, but atleast I can see that it has this onclick event. But now when separting this into jquery file, I have to search first this jquery file for id101 and then check events associated with it, which can be problem with html file having many elements and associated event handlers. Is there any better way to to find that information ?

• javascript
• jquery
• html

• Don't put JavaScript in the "href" at all. Just do that (conditionally, if you want) in the event handler. – Pointy Commented Jan 13, 2012 at 15:03
• @endroix: As Pointy said, just remove the whole href attribute. Inline JS is bad news. And, when you bind with the jQuery selector, you have to use a '#' to indicate ID. Right now your jQuery is most likely doing nothing. Change it to $("#id101").click();, and remove that whole href="x". – Josh Commented Jan 13, 2012 at 15:13
• @Josh, I forgot that #. Now updated – newcoderintown Commented Jan 13, 2012 at 15:19

3 Answers 3

If I understand correctly, you want to avoid the inline Javascript, but you also want to be able to glance at an a and know if it has an event bound to it. Unfortunately, there isn't an acceptable way to denote this, as inline Javascript is bad news. Perhaps you can just give your element a dummy class to aid your future readability. Other than that, forget the whole func1 and func2 thing. Just use an anonymous function inside of your click binding.

<a id="some_id" class="optional_has_click">Click Me</a>

<script type="text/javascript">
  $(document).ready(function(){

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

      // do something
      alert( $(this).attr("id") );

    });

  });
</script>

EDIT: Also, removing the href will remove the visual cue, so you can use your dummy class to make it look like an a.

Here is a fiddle for you: http://jsfiddle.net/zzTSt/1/

The best I can tell you is that this is "smelly" code--you don't want your javascript all over the place like this. I would recommend you spend a few more hours learning some jQuery fundamentals and move on from there. I know it can be frustrating, especially if you are working with legacy javascript.

Yes, I recommend you to write func1 inside func2. HTML:

<a id="id101" href="#" >Link</a>

jQuery

$("#id101").click(func2() {
   var status = false;
   //func2 goes here and modifies status value.
   if (status) {
       // func1 goes here
   } else {
       // in case if status is false.
   }

});

Also I didn't get what you mean in second part of your question, could you please be more specific.