Two Jquery functions within a parent div causing issues

Question

I have a website which has a div that I'm using as a list header (closed through the use of jQuery and HTML code). In other words, if someone clicks this "div" it will display a new "child div" which then has a sub-list button.

My problem stems from this, though each jQuery function runs independently perfectly fine, when situating them in a parent/child relationship things get a bit odd.

When the Parent "div" is open it works fine, however when the child sub-list button is pressed it displays the child's hidden "div" but also closes the previous displayed parent "div" leaving me with an 'open' "child" but a closed "parent".

If I open the "parent div" again the "child div" is already open, again pressing the "child div" button to close the "child div" closes both the parent and child.

This is an example of my html

 <div class="dropdown" href="javascript:void(0);">    
    <h3><a>TITLE</a></h3>
        <div class="Big2" style="display: none;">
           <div class="twocolumn">
           <div class="column facLeft">
             <a class="acBtn" href="javascript:void(0);">Read More</a>
               <div class="acBody" style="display: none;">
      <!-- insert text etc -->

And this is my jQuery code that I use [placed in the head using script tags:]

$(function(){
$('.dropdown').click(function(){
    if( $(this).hasClass('ake')){
        $(this).closest('.dropdown').find('.Big2').stop().slideUp(200,'swing');
        $(this).removeClass('ake');
    }
    else{
        $(this).closest('.dropdown').find('.Big2').stop().slideDown(100,'swing');
        $(this).addClass('ake');
    }
});
});

and this one to call the "child"

$(function(){
$('.acBtn').click(function(){
    if( $(this).hasClass('open')){
        $(this).closest('.column').find('.acBody').stop().slideUp(200,'swing');
        $(this).removeClass('open');
    }
    else{
        $(this).closest('.column').find('.acBody').stop().slideDown(100,'swing');
        $(this).addClass('open');
    }
});
});

disregarding the fact that I'm using two codes separately instead of merging them into one (plus calling them in html) what could possibly be causing the second code to affect the first one? Is it something with .closest not stopping in the DOM tree?

drop a jsfiddle so we can help – madalinivascu Mar 28 '16 at 09:15 — madalinivascu, Mar 28 '16 at 09:15

score 0 · Accepted Answer · edited May 23 '17 at 11:59

0

Your child is inside the .dropdown so when you click the child you in fact trigger the parent click as well

TRy something like this

$('.dropdown').click(function(e){
if(!$(e.target).is('.acBtn')) {
    if( $(this).hasClass('ake')){
        $(this).closest('.dropdown').find('.Big2').stop().slideUp(200,'swing');
        $(this).removeClass('ake');
    }
    else{
        $(this).closest('.dropdown').find('.Big2').stop().slideDown(100,'swing');
        $(this).addClass('ake');
    }
    }
});

https://jsfiddle.net/r50bo5nr/

for more info see event bubbling

edited May 23 '17 at 11:59

Community

1
1

answered Mar 28 '16 at 09:20

madalinivascu

32,064
4
39
55

The API doesn't do a particularly good job of explaining that, for future reference, in effect even though I used .closest to distinguish between the two the click event affects all child/parent requests? – kster Mar 28 '16 at 09:46
the click event will always trigger the parent first and then the child – madalinivascu Mar 28 '16 at 09:54
1

Thank you for clarifying that. – kster Mar 28 '16 at 09:57
see http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing for more info – madalinivascu Mar 28 '16 at 10:01

score 0 · Answer 2 · answered Mar 28 '16 at 09:35

you need to use stopPropagation()

$('.dropdown').click(function() {
  if ($(this).hasClass('ake')) {
    $(this).closest('.dropdown').find('.Big2').stop().slideUp(200, 'swing');
    $(this).removeClass('ake');
  } else {
    $(this).closest('.dropdown').find('.Big2').stop().slideDown(100, 'swing');
    $(this).addClass('ake');
  }
});

$('.acBtn').click(function(e) {
  e.stopPropagation();
  if ($(this).hasClass('open')) {
    $(this).closest('.column').find('.acBody').stop().slideUp(200, 'swing');
    $(this).removeClass('open');
  } else {
    $(this).closest('.column').find('.acBody').stop().slideDown(100, 'swing');
    $(this).addClass('open');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="dropdown" href="javascript:void(0);">
  <h3><a>TITLE</a></h3>
  <div class="Big2" style="display: none;">
    <div class="twocolumn">
      <div class="column facLeft">
        <a class="acBtn" href="javascript:void(0);">Read More</a>
        <div class="acBody" style="display: none;">abc

Thank you very much, this could work well. It's a bit less complex than the above method. Wish I could select two answers. — kster, Mar 28 '16 at 09:48
i don't recomend this option because it will disable all click events in that dropdown — madalinivascu, Mar 28 '16 at 09:52
Ah for example, if I have further click events in the child menu they'll be disabled? For now I don't think that's much of an issue as it's mostly just being used to display extra information. — kster, Mar 28 '16 at 09:55
yes, this is right, note if you change that code in the future you may have problems debuging it — madalinivascu, Mar 28 '16 at 09:59

Two Jquery functions within a parent div causing issues

2 Answers2