Databases
StackOverflow2013
Postsdbo
POClick on dynamic children DOMs with condition on parent class
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POClick on dynamic children DOMs with condition on parent class
    text
    copied!<p>I have <code>.main</code> that contain a list of dynamic content that can be added on the fly. The <code>.main</code> can also be disabled with <code>.disable</code> class. When it's disabled, I don't want all the content items to be clicked.</p> <p>You can see below that I am using a <strong>hack</strong> to detect <code>.disable</code> class after <code>.main</code> being clicked. Is there a way to <strong>structure the CSS selector for jQuery</strong> to avoid picking up children DOMs event if parent has certain class? Maybe some kind of <code>.main:not(.disable)</code> but I couldn't figure out how.</p> <p><strong>Code:</strong> <a href="http://jsfiddle.net/qhoc/99rjU/" rel="nofollow">http://jsfiddle.net/qhoc/99rjU/</a></p> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="main"&gt; &lt;div class="state"&gt;Enabled&lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;a class="btn" href="#"&gt; Toggle State &lt;/a&gt; </code></pre> <p><strong>Javascript:</strong></p> <pre><code>$('.btn').on('click', function() { if ($('.main').hasClass('disable')) { $('.main').toggleClass('disable'); $('.state').text('Enabled'); } else { $('.main').toggleClass('disable'); $('.state').text('Disabled'); } }); $('.main').on('click', ' ul li', function() { /* This is a hack if ($('.main').hasClass('disable')) return; */ alert('Item is clicked'); }); </code></pre> <p>I was thinking of other <strong>unclean alternatives</strong>:</p> <ol> <li><p>Do whole <code>body</code> click event like this <code>$('body').on('click', '.main:not(.disable) ul li', function()</code> but this one is very ugly! It has to scan the whole body on each click</p></li> <li><p>Unbind <code>li</code> click event each time <code>a</code> is trigger to call <code>disable</code>. But is this an optimal or best practice to do so? </p></li> </ol> <p><strong>UPDATE 1</strong>:</p> <p>So actually in my project I only want to disable the <code>a</code> in the list. Since there are other <code>buttons</code> and <code>divs</code> that I still want to trigger event. However, look like using this won't work</p> <pre><code>.disable li a { pointer-events: none; } </code></pre> <p>Here is the link for this <a href="http://jsfiddle.net/qhoc/99rjU/2/" rel="nofollow">http://jsfiddle.net/qhoc/99rjU/2/</a></p> <p>Look like this is still experimental and won't work on anchor tag??</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events</a></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