Jquery href and onclick sharing

Question

I have code like this

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

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

In the process of learning jquery, I found that onclick is not good and depreciated, so I changed the code above 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 processing the click handler, what can I do with JavaScript inside href? Should I call func1 inside func2 in the jQuery handler for func2 when the condition inside func2 is true? Or is there some elegant solution?

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

Further clarification of the above question as requested,

I meant that id101 can have onclick, onmouseover, onmouseout and many other similar events. There may be many such elements with many such event handlers. What is the best way to identify them? In the old style, all such event handlers fit together like this

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

I am not saying that this is good, but at least I see that he has this onclick event. But now, when you split this into a jquery file, I have to first search for this jquery file for id101 and then check the events associated with it, which could be a problem with an html file that has many elements and related event handlers. Is there a better way to find this information?

Answer 1

If I understand correctly, you want to avoid the built-in Javascript, but you also want to take a look at a and find out if the event is related to it. Unfortunately, there is no acceptable way to label this, since inline Javascript is bad news. Perhaps you can just give your element a dummy class to help your future readability. Other than that, forget all the func1 and func2 . Just use the anonymous function inside 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 href will remove the visual signal, so you can use your dummy class to look like a .

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

Answer 2

Yes, I recommend you 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 did not understand what you mean in the second part of your question, could you be more specific.

Answer 3

The best I can tell you is that this is a "smelly" code - you don’t need your javascript everywhere like this. I would recommend you spend a few more hours learning some of the basics of jQuery and move on from there. I know this can be frustrating, especially if you are working with legacy javascript.