Run jQuery function onclick

Question

so i implemented a bit of jQuery that basically toggles content via a slider that was activated by an  lt a gt  tag  now thinking about it id rather have the DIV thats holding the link be the link its self   the jQuery that i am using is sitting in my head looks like this    lt script type  text javascript  gt  function slideonlyone thechosenone         systems detail   each function index          if    this  attr  id      thechosenone                 this  slideDown 200                 else                this  slideUp 600                   lt  script gt    i was using this as a index type box so there are several products when you click on the  lt a gt  tag that used to be an image  it would render a bit of content beneath it describing the products details    lt div class  system box  gt     lt h2 gt BEE Scorecard database lt  h2 gt     lt p gt                  lt  p gt     lt a href  javascript slideonlyone  sms box     gt  lt  a gt   lt  div gt    the products details are wrapped in this div    lt div class  systems detail  id  sms box  gt   lt  div gt    so when you click on what used to be a image  it would run the slideonlyone  div id name   function  the function above then first closes all the other divs with the class name  system details  and then opens slides the div with the id that was passed into the slideonlyone function  that way you can toggle products details and not have them all showing at once   note i only kept the  lt a gt  tag to show you what was in there i will be getting rid of it   note  i had an idea of just wrapping the whole div in an  lt a gt  tag but is that good practice   So now what i am wondering is since you need JavaScript to run onclick on a div tag how do you write it so that it still runs my slideonlyone function

User · Answer

There s several things you can improve upon here  To start  there s no reason to use an  lt a gt   anchor  tag since you don t have a link   Every element can be bound to click and hover events    divs  spans  labels  inputs  etc   I can t really identify what it is you re trying to do  though  You re mixing the goal with your own implementation and  from what I ve seen so far  you re not really sure how to do it  Could you better illustrate what it is you re trying to accomplish      EDIT     The requirements are still very vague  I ve implemented a very quick version of what I m imagining you re saying     or something close that illustrates how you might be able to do it  Left me know if I m on the right track   http   jsfiddle net THEtheChad j9Ump

User · Answer

Why do you need to attach it to the HTML  Just bind the function with hover     div system box   hover function    mousin                               function     mouseout       If you do insist to have JS references inside the html  which is usualy a bad idea you can use   onmouseover  yourJavaScriptCode      after topic edit    lt div class  system box  data-target  sms box  gt            div system box   click function    slideonlyone   this  attr  data-target

User · Answer

You can bind the mouseenter and mouseleave events and jQuery will emulate those where they are not native       div system box   on  mouseenter   function          enter     on  mouseleave   function          leave       fiddle  note  do not use hover as that is deprecated

User · Answer

Using obtrusive JavaScript  i e  inline code  as in your example  you can attach the click event handler to the div element with the onclick attribute like so     lt div id  some-id  class  some-class  onclick  slideonlyone  sms box     gt             lt  div gt    However  the best practice is unobtrusive JavaScript which you can easily achieve by using jQuery s on   method or its shorthand click    For example      document  ready  function              some-class   on  click   slideonlyone  sms box             OR             some-class   click slideonlyone  sms box            Inside your handler function  e g  slideonlyone   in this case  you can reference the element that triggered the event  e g  the div in this case  with the   this  object  For example  if you need its ID  you can access it with   this  attr  id       EDIT  After reading your comment to  fmsf below  I see you also need to dynamically reference the target element to be toggled  As  fmsf suggests  you can add this information to the div with a data-attribute like so    lt div id  some-id  class  some-class  data-target  sms box  gt           lt  div gt    To access the element s data-attribute you can use the attr   method as in  fmsf s example  but the best practice is to use jQuery s data   method like so    function slideonlyone          var trigger id     this  attr  id       This would be  some-id  in our example      var target id      this  data  target       This would be  sms box                Note how data-target is accessed with data  target    without the data- prefix  Using data-attributes you can attach all sorts of information to an element and jQuery would automatically add them to the element s data object

[javascript] Run jQuery function onclick

Examples related to javascript

Examples related to html

Examples related to onclick

Examples related to jquery