Use jQuery click to handle anchor onClick()
The first time you click the link, the openSolution
function is executed. That function binds the click
event handler to the link, but it won't execute it. The second time you click the link, the click
event handler will be executed.
What you are doing seems to kind of defeat the point of using jQuery in the first place. Why not just bind the click event to the elements in the first place:
$(document).ready(function() { $("#solTitle a").click(function() { //Do stuff when clicked });});
This way you don't need onClick
attributes on your elements.
It also looks like you have multiple elements with the same id
value ("solTitle"), which is invalid. You would need to find some other common characteristic (class
is usually a good option). If you change all occurrences of id="solTitle"
to class="solTitle"
, you can then use a class selector:
$(".solTitle a")
Since duplicate id
values is invalid, the code will not work as expected when facing multiple copies of the same id
. What tends to happen is that the first occurrence of the element with that id
is used, and all others are ignored.
Lets take an anchor tag with an onclick event, that calls a Javascript function.
<a href="#" onClick="showDiv(1);">1</a>
Now in javascript write the below code
function showDiv(pageid){ alert(pageid);}
This will show you an alert of "1"....
The HTML should look like:
<div class="solTitle"> <a href="#" id="solution0">Solution0 </a></div><div class="solTitle"> <a href="#" id="solution1">Solution1 </a></div><div id="summary_solution0" style="display:none" class="summary">Summary solution0</div><div id="summary_solution1" style="display:none" class="summary">Summary solution1</div>
And the javascript:
$(document).ready(function(){ $(".solTitle a").live('click',function(e){ var contentId = "summary_" + $(this).attr('id'); $(".summary").hide(); $("#" + contentId).show(); });});
See the Example: http://jsfiddle.net/kmendes/4G9UF/