click events binded on document are not triggering for some elements

user_9196708 0
Viewed 64

in our project , i binded one click event on the document

$(document).on('click', function(e){
     // some block of code
    });

our team recently started using foundation js(version 5.3) and our project html will have some foundation classes like foundation tabs etc.

the earlier click event is not firing on elemnts having foundation classes

<li>
      <a href="javascript:void(0);" id="undoIcon"><i class="create-icon-undo"></i></a> 
    <p>Undo</p>
    </li>  ------------ when clicked on this , event is firing

but

<li class="has-dropdown">
      <a href="javascript:void(0);" id="saveIcon"><i class="create-icon-save"></i></a><p>Save</p>
</li> -------------- when clicked on this foundation clicks are firing but the event binded on document is not firing.

There are some more elements having the same problem , one of the template has html related to foundation tabs.

So there any way where the clicks can fire. iam triggering the foundation like this

$(document).ready(function(){
            $(document).foundation();
        });

Thanks in Advance

zurb-foundation html jquery javascript
1 Answers

After a long search , finally found the root cause. In Foundation5 when ever an event is fired , it checks if target has some classes like has-dropdown.

If those conditions are met , Foundation5 is stopping the event from there using event.stopImmediatePropagation().

Thats the reason , events binded on document are not propagating.

In Foundation6 , all these stopImmediatePropagations are removed , so no issues there.

user_91967080
Related