2

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.

1
  • 1
    If you add a practical example to your question, the time and odds to get a proper answer are increased exponentially. Anyway, if the elements you want to disable are all input (and button/textarea/select) elements, I'd set their disabled property to true. Nov 16, 2012 at 18:29

3 Answers 3

1

Do this in the child element's handler:

if ($(this).parent().is(".disabled")) {
    return false;
}

Or if by "parent" you meant some further ancestor, do this:

// In the child element's handler...
if ($(this).parents(".disabled").length) {
    return false;
}

If you want to still allow the event to bubble, then remove false from the return statement.


As noted in the comments, using .closest() instead of .parents() may give slightly better results since it can stop its testing once the first .disabled ancestor is found.

2
  • As Atif commented (and removed?) closest() may provide better performance when there's a disabled ancestor. Nov 16, 2012 at 18:34
  • @AtifMohammedAmeenuddin: True, we only need to test for the first one. Nov 16, 2012 at 18:34
1

Not totally sure what you want to do here, but as far as I understand you want to make all descendents of a parent element not clickable, EXCEPT one of the child elements.

Assuming you plan to keep the class "disabled" on your parent element:

$('.disabled').find(':not(.enable_button)').on('click', function() {
    return false;
});

This also assumes you can put a class "enable_button" on the child element you want to be clickable. If you don't want to use a class, I'm sure there's some way to identify it.

When the user clicks the re-enable button, just remove this handler.

2
  • This was what I first attempted, unfortunately there are handlers directly attached to the child elements which aren't easily overridden (i.e. from a plugin, not my own code) so by the time this delegated event gets handled, the child events have already taken place. Nov 20, 2012 at 20:20
  • Does jQuery's $.unbind() not work on those elements for some reason? If not, you might try cloning each child element with $.clone() (without event handlers), then replacing them with the clones.
    – user428517
    Nov 20, 2012 at 20:46
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.