Question

I’ve got a rather complex UI built, and I want to be able to disable part of it so that all child elements, except one (the re-enable button) are not clickable.

I’m adding a disabled class to the parent and have a listener set up on the parent to check for clicks, but because the child elements events are not delegated, they trigger before the parent’s click handler does, so I can’t stop the bubbling.

From my understanding, using the capture phase isn’t really an option, so is there another approach?

I’d rather not slap a new HTML element (overlay) on top, since I need to be able to click the button inside the parent to remove the disabled state.

Should I rewrite all the child element click handlers to use delegation instead, so only the parent is listening for click events?

[Updating with more explanation and example code]
I have a dynamically loaded panel that’s different on each section of my site. Once it’s loaded in, page-specific scripts are run to hook up events to various elements in the panel. This includes links and forms, and also jeditable elements (which are just regular spans in the DOM.) Example HTML:

<div class="infoPanelContent" id="detailSection">
<h1><span>
    Details 
    <a class="sprite-icons flag" title="Flag" data-recordid="123123" href="/tickets/flag">Flag</a>
</span></h1>
<ul class="flexCol">
    <li>
        <h3>Status:</h3>
        <span id="setStatus">
            <span data-recordid="123123" data-projectid="104824" id="status" class="editWithSelect" title="Click to edit...">Open</span>
            <input type="text" class="hidden" maxlength="50" placeholder="New Status">
        </span>
    </li>
</ul>

<!-- Responsiblity -->
<h1><span>
    Responsibility</span>
    <a data-orientation="left" title="Add people" href="/tickets/responsible?r=123123" class="toggleAddNew sprite-buttons iconAdd">Add people</a>
</h1>
<ul class="singleCol">
    <li>
        <p>Mel L.</p>
        <a class="sprite-buttons iconRemove" data-itemid="432432" data-recordid="123123" data-projectid="104824" href="/tickets/delete-responsible">Delete</a>
    </li>
</ul>
<h1>
<span>Attachments</span>
<a data-orientation="left" title="Add attachments" href="/tickets/attachments?r=123123" class="toggleAddNew sprite-buttons iconAdd">Add attachments</a>
</h1>
<ul class="singleCol attachments">
    <li>
        <p><a target="_blank" href="http://www.test.com"><span class="sprite-icons iconFiletypeIMG"></span><em>Sample (60 KB)</em></a></p>
    </li>
</ul>

<p class="centerButton"><a data-delete="Delete Ticket" data-restore="Restore Ticket" class="sprite-buttons btnBlueLight" title="" data-recordid="123123" data-projectid="104824" href="/tickets/delete" id="deleteTicket"><strong class="sprite-buttons">Restore Ticket</strong></a></p>

Example elements with functionality hooked up are $(".flag"), $("#status"), $(".toggleAddNew") etc. and the one item that does need to be clickable is the delete button at the bottom (which is an anchor tag.) Bear in mind that this HTML may be different on different pages. If I were to delegate the clicks for the anchors, I’d have no problem, but it’s really the jeditable stuff that is an issue as that can’t be set up using delegated events. I’ve tried adding a listener as $("#infoPanel *").click( ... ) and stopping propagation, default behavior and returning false, but the items’ event handlers run first, so that doesn’t work. Normally, I would just put an overlay over the whole thing and call it a day, if not for that one button.

Answer 1

I solved this using a combination of jEditable’s .editable('disabled') method and then adding a handler directly on the a and button elements inside the disabled panel (excluding the restore button.) That and making sure that the elements I bound myself used delegation, so any event I have control over is registered to the panel. This allowed me to make the disabling/enabling global and just write cleaner code for each section.