Databases
StackOverflow2013
Postsdbo
POHow to prevent children click on parent click
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to prevent children click on parent click
    text
    copied!<p>I have done the following code structure and doing <code>addClass item_box_popup</code> and <code>removeClass item_box</code> on click of <code>item_box div</code>.</p> <pre><code>&lt;div class="item_box"&gt; &lt;!--This is the small div which when clicked changes to the item_box_popup div--&gt; &lt;div class="name"&gt;...&lt;/div&gt; &lt;div class="detail"&gt;...&lt;/div&gt; &lt;/div&gt; &lt;div class="item_box_popup"&gt; &lt;!--This div expands to show the detail and the children in it has a click event--&gt; &lt;div class="name"&gt;...&lt;/div&gt; &lt;div class="detail"&gt;...&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The <code>item_box div</code> has a click event in it and not the children. The working is to change the div to <code>item_box_pop div</code> by <code>addClass</code> and <code>removeClass</code> when clicked. </p> <p>The <code>item_box_popup</code> does not have a click event but the children has the click event defined. We have used <code>delegate</code> to define the click event for <code>.item_box_popup .name</code> etc. </p> <p>The problem is when we click the <code>item_box div</code> the click event defined for <code>.item_box_popup .name</code> is also getting triggered. This may be due to the change class defined on click for <code>.item_box</code>. </p> <p>I don't want the click event to trigger on the children when <code>.item_box</code> is clicked. I have tried <code>undelegate</code> to stop triggering of click on item_box children and just do the change class defined in the click for it but this is not working.</p> <p>The click event for <code>.item_box</code></p> <pre><code>$('.slide &gt; div').bind('click',function(e) { if(!$(this).hasClass('item_box_popup')){ var index=$('.slide &gt; div').index(this); $(this).removeClass('item_box'); $(this).addClass('item_box_popup'); Nomad.config.firstVisibleItem=index;&lt;!--This is to set the position for .item_box_popup--&gt; } }); </code></pre> <p>The click event for <code>.item_box_popup</code></p> <pre><code>$("body").delegate('.item_box_popup .name, .item_box_popup .detail','click', function(e){ //working code here for this }); </code></pre> <p><code>e.stopPropagation();</code> disables the default click handler of <code>.item_box</code></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload