Use jquery to handle onClick () bindings

Question

I have a set of dynamically generated anchor tags in a for loop as follows:

<div id = "solTitle"> <a href = "#" id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>'; 

Once this code is executed, the html output for one of the files will look like this:

 <div id = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> <div id = "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br> 

Now I want different texts to appear when I click on the specified links. openSolution () looks like this:

 function openSolution() { alert('here'); $('#solTitle a').click(function(evt) { evt.preventDefault(); alert('here in'); var divId = 'summary' + $(this).attr('id'); document.getElementById(divId).className = ''; }); } 

When I execute it and click on any of the links, the stream is not included in the jquery click handler. I checked it with the above warnings. It displays only a warning - “here”, and not a warning - “here”. When you click the link again, everything works fine with the correct divId value.

Answer 1

The first click on a link executes openSolution . This function associates a click event handler with a link, but does not execute it. The second time you click the link, the click event handler will be executed.

What you are doing seems to hit 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 do not need onClick attributes for your elements.

It also looks like you have multiple elements with the same id ("solTitle") value, which is incorrect. You will need to find another common characteristic ( class usually a good option). If you change all occurrences of id="solTitle" to class="solTitle" , you can use the class selector:

 $(".solTitle a") 

Since duplicate id values ​​are invalid, the code will not work as expected when accessing multiple copies of the same id . What is the case is that the first occurrence of an element with this id used, and all others are ignored.

Answer 2

Lets you take an anchor tag with an onclick event that calls the Javascript function.

 <a href="#" onClick="showDiv(1);">1</a> 

Now in javascript write below code

 function showDiv(pageid) { alert(pageid); } 

This will show you a warning of "1" ....

Answer 3

HTML should look like this:

 <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 javascript:

 $(document).ready(function(){ $(".solTitle a").live('click',function(e){ var contentId = "summary_" + $(this).attr('id'); $(".summary").hide(); $("#" + contentId).show(); }); }); 

See an example: http://jsfiddle.net/kmendes/4G9UF/

Answer 4

 <div class = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> <div class= "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br> $(document).ready(function(){ $('.solTitle a').click(function(e) { e.preventDefault(); alert('here in'); var divId = 'summary' +$(this).attr('id'); document.getElementById(divId).className = ''; /* or $('#'+divid).removeAttr('class'); */ }); }); 

I changed a few things:

• remove onclick attr and bind the click event inside document.ready
• solTitle name changed as identifier to CLASS: id can not repeat

Answer 5

You cannot have the same identifier for elements many times. It must be unique.

Use a class and make unique identifiers:

 <div class="solTitle" id="solTitle1"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> 

And use the class selector:

 $('.solTitle a').click(function(evt) { evt.preventDefault(); alert('here in'); var divId = 'summary' + this.id.substring(0, this.id.length-1); document.getElementById(divId).className = ''; }); 

Answer 6

You are onclick event inside the function. This means that after the function is executed once, the second onclick element is also assigned to the element.

Either assign an onclick function, or use jquery click() .

No need to have both