How to cancel change event for accordion controls

Question

$("#accordion").accordion({
    change: function (event, ui) {
        alert('event have to be changed')
    },
    changestart: function (event, ui) {
       return false;
    }
});

Is it possible to cancel the change event?

this cancel event but action still working – Simbian Dec 01 '10 at 12:01 — Simbian, Dec 01 '10 at 12:01

score 4 · Answer 1 · answered Jun 28 '11 at 14:57

4

I am not sure about change but for other events in jqueryui returning false cancels the event.

answered Jun 28 '11 at 14:57

Martin Wawrusch

780
1
5
12

2

This works because return false is equivalent to calling `e.preventDefault();` and `e.stopPropagation();` – earl3s Oct 21 '16 at 06:08

score 3 · Answer 2 · edited May 23 '17 at 11:48

stopPropagation() is the key to stopping a jQueryUI action from processing, but it must be interrupted BEFORE the changestart event. For example, when the header item is actually clicked.

If this is a header/content pair in your accordion:

<h3 class='noexpand'>This is a dummy header</h3>
<div>This is dummy content</div>

Then this will prevent the accordion from expanding the div when the header is clicked:

$("h3.noexpand").click(function(e) {
    e.stopPropagation();
});

See jquery accordion prevent bubbling / allow default link action.

score 2 · Answer 3 · answered Apr 08 '14 at 05:50

2

As Martin said you can return false. See a code sample below.

...
eventname: function( event, ui ) {
    // Add your code here
    ...

    return false;
}

answered Apr 08 '14 at 05:50

THRIVE

4,428
2
15
12

score 1 · Answer 4 · answered Dec 01 '10 at 12:53

1

event.preventDefault();
event.stopPropagate();

answered Dec 01 '10 at 12:53

Ali Tarhini

5,078
6
38
63

1

`stopPropagation()`, not "stopPropogate()" – earl3s Oct 21 '16 at 05:56

score 0 · Answer 5 · answered Sep 04 '14 at 14:30

0

Returning false does nothing, to cancel an event in jQueryUI you need to call preventDefault() on the event.

$("#accordion").accordion({
    changestart: function (event, ui) {
       event.preventDefault();
    }
});

This should work with all event methods, including autocomplete. Handy if you wish to include a few custom options in your autocomplete menu that you want someone to select but don't actually want to add to the input it is tied to. :)

answered Sep 04 '14 at 14:30

Robee Shepherd

9
1

"These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false." - http://api.jquery.com/event.stoppropagation/ – bitoiu Sep 04 '14 at 15:49
This actually doesn't work. It was my first thought too. – earl3s Oct 21 '16 at 05:55

score 0 · Answer 6 · answered Oct 21 '16 at 06:11

0

What worked for me is calling:

function onChange(e, ui) {
    e.preventDefault();
    e.stopPropagation();
}

Returning false at the end of the function has the same affect because it's the equivalent of making those two function calls.

answered Oct 21 '16 at 06:11

earl3s

2,195
1
20
23

How to cancel change event for accordion controls

6 Answers6

Linked