Use jquery click to handle anchor onClick

Question

I have a set of dynamically generated anchor tags in a for loop as follows    lt div id    solTitle  gt   lt a href        id        tagId      onClick    openSolution     gt      solTitle     lt  a gt  lt  div gt   lt br gt      Once this code is executed the html output for one of the case would look like    lt div id    solTitle  gt   lt a href        id    solution0  onClick    openSolution     gt Solution0  lt  a gt  lt  div gt   lt br gt    lt div id    solTitle  gt   lt a href        id    solution1  onClick    openSolution     gt Solution1  lt  a gt  lt  div gt   lt br gt    Now I want different texts to be displayed on clicking the above 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 either of the  links  the flow doesnot come inside the jquery click handler   I checked it by the above alerts used  It only displays the alert -  here  and not the alert -  here in    On clicking the link second time  everything works perfectly with correct value of divId

User · Answer

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"....

User · Answer

You are assigning an onclick event inside an function  That means once the function has executed once  the second onclick event is assigned to the element as well      Either assign the function onclick or use jquery click      There s no need to have both

User · Answer

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

User · Answer

The HTML should look like    lt div class  solTitle  gt   lt a href      id  solution0  gt Solution0  lt  a gt  lt  div gt   lt div class  solTitle  gt   lt a href      id  solution1  gt Solution1  lt  a gt  lt  div gt    lt div id  summary solution0  style  display none  class  summary  gt Summary solution0 lt  div gt   lt div id  summary solution1  style  display none  class  summary  gt Summary solution1 lt  div gt    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

User · Answer

lt div class    solTitle  gt   lt a href        id    solution0  onClick    openSolution     gt Solution0  lt  a gt  lt  div gt   lt br gt    lt div class   solTitle  gt   lt a href        id    solution1  onClick    openSolution     gt Solution1  lt  a gt  lt  div gt   lt br gt       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 few things    remove the onclick attr and  bind click event inside the document ready changed solTitle to be an ID to a CLASS  id cant be repeated

User · Answer

You can t have multiple time the same ID for elements  It is meant to be unique   Use a class and make your IDs unique    lt div class  solTitle  id  solTitle1  gt   lt a href        id    solution0  onClick    openSolution     gt Solution0  lt  a gt  lt  div gt    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

[javascript] Use jquery click to handle anchor onClick()

Examples related to javascript

Examples related to jquery

Examples related to click

Examples related to anchor