html div onclick event

Question

I have one html div on my jsp page  on that i have put one anchor tag  please find code below for that    lt div class  expandable-panel-heading  gt        lt h2 gt            lt a id  ancherComplaint  href   addComplaint                               onclick  markActiveLink this    gt ABC lt  a gt        lt  h2 gt   lt  div gt    js code      expandable-panel-heading not  ancherComplaint    click function           alert  123          function markActiveLink el           alert   el  attr  id          here I when I click on div I got alert with 123 message  its fine but when I click on ABC I want message I want to call markActiveLink method   JSFiddle  what is wrong with my code  please help me out

User · Answer

when click on div alert key        document  delegate   searchbtn    click   function             var key   trim     txtkey   val             alert key

User · Answer

Try this      expandable-panel-heading not  ancherComplaint    click function          alert  123             ancherComplaint   click function  event        alert   this  attr  id         event stopPropagation        DEMO

User · Answer

You need to read up on event bubbling and for sure remove inline event handling if you have jQuery anyway   Test the click on the div and examine the target  Live Demo      expandable-panel-heading   on  click  function  e        if  e target id    ancherComplaint        or test the tag         e preventDefault       or e stopPropagation           markActiveLink e target                 else alert  123        function markActiveLink el           alert el id

User · Answer

Change your jQuery code with this  It will alert the id of the a       expandable-panel-heading not  ancherComplaint    click function      markActiveLink             alert  123          function markActiveLink el       var el      a   attr  id       alert el        Demo

User · Answer

I would have used stopPropagation like this       expandable-panel-heading not  ancherComplaint    click function           alert  123              ancherComplaint   on  click  function e       e stopPropagation        alert  hiiiiiiiiii

User · Answer

put your jquery function inside ready function for call click event     document  ready function            ancherComplaint   click function           alert   this  attr  id

User · Answer

Try following        expandable-panel-heading   click function  e            if e target nodeName     A                markActiveLink e target              return            else              alert  123                    function markActiveLink el           alert   el  attr  id          Here is the working demo   http   jsfiddle net JVrNc 4

User · Answer

Try out this example  the onclick is still called from your HTML  and event bubbling is stopped     lt div class  expandable-panel-heading  gt   lt h2 gt     lt a id  ancherComplaint  href   addComplaint  onclick  markActiveLink this  event stopPropagation     gt ABC lt  a gt   lt  h2 gt   lt  div gt    http   jsfiddle net NXML7 1

User · Answer

The problem was that clicking the anchor still triggered a click in your  lt div gt   That s called  event bubbling    In fact  there are multiple solutions    Checking in the DIV click event handler whether the actual target element was the anchor  rarr  jsFiddle      expandable-panel-heading   click function  evt        if  evt target tagName     A             alert  123                  Also possible if conditions         - evt target id     ancherComplaint         -    evt target  is   ancherComplaint            ancherComplaint   click function          alert   this  attr  id          Stopping the event propagation from the anchor click listener  rarr  jsFiddle      ancherComplaint   click function  evt        evt stopPropagation        alert   this  attr  id             As you may have noticed  I have removed the following selector part from my examples    not  ancherComplaint    This was unnecessary because there is no element with the class  expandable-panel-heading which also have  ancherComplaint as its ID   I assume that you wanted to suppress the event for the anchor  That cannot work in that manner because both selectors  yours and mine  select the exact same DIV  The selector has no influence on the listener when it is called  it only sets the list of elements to which the listeners should be registered  Since this list is the same in both versions  there exists no difference

[javascript] html div onclick event

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to onclick