Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
blog: jl_signal, code: jQuery event unbinding idiosyncracies
<html>
<body>
<div id="divs"></div>
<br />
<div id="log"></div>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function() {
// Build one div for each callback, to display the order of callback dispatch.
for (var i = 1; i <= 3; ++i) {
$("#divs").append("<div id=\"" + i + "\">Callback " + i + ":<span class=\"content\"></div></div>");
}
function div(i) { return "#" + i; }
function content(i) { return "#" + i + " .content"; }
var E = "custom";
var bound = {};
var callSequence = 0;
// log() just spits out callback activity in a linear list.
function log(s) {
$("#log").append("<div>" + s + "</div>")
}
// Bind f as the ith callback for the event. Decorate f with some logging code.
function bind(i, f) {
log("binding callback " + i);
bound[i] = function() {
log("calling callback " + i + ", callSequence: " + callSequence);
$(content(i)).append(" " + callSequence);
callSequence += 1;
f();
}
$(document).bind(E, bound[i]);
}
// Unbind the ith callback, if it is already bound.
function unbind(i) {
if (bound[i]) {
log("unbinding callback " + i);
$(document).unbind(E, bound[i]);
bound[i] = null;
} else {
log("did not unbind callback " + i + "; was not previously bound");
}
}
function trigger() {
log("triggering event, next call should be callSequence " + callSequence);
$(document).trigger(E);
}
// Build 3 callbacks for one event. They will be executed in
// the order that they are bound.
bind(1, function() { unbind(2); });
bind(2, function() { trigger(); });
bind(3, function() { unbind(3); trigger(); });
trigger();
/* Results:
Callback 1: 0 2 4 6
Callback 2: 1
Callback 3: 3 5
binding callback 1
binding callback 2
binding callback 3
triggering event, next call should be callSequence 0
calling callback 1, callSequence: 0
unbinding callback 2
calling callback 2, callSequence: 1
triggering event, next call should be callSequence 2
calling callback 1, callSequence: 2
did not unbind callback 2; was not previously bound
calling callback 3, callSequence: 3
unbinding callback 3
triggering event, next call should be callSequence 4
calling callback 1, callSequence: 4
did not unbind callback 2; was not previously bound
calling callback 3, callSequence: 5
did not unbind callback 3; was not previously bound
triggering event, next call should be callSequence 6
calling callback 1, callSequence: 6
did not unbind callback 2; was not previously bound
*/
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment