jquery custom events attached to .show and .hide - jquery-ui

Question

I'm exploring the potential of jquery to satisfy some of our UI requirements, and am experiencing some curious behaviour. I'm very new to jQuery, and I'm trying to implement a basic pub-sub type of pattern that's hooked into the show & hide functions.
Despite the custom event mechanism looking perfectly simple on the surface, it isn't behaving as I expect. I can't see my syntactical mistake, so I must be misunderstanding the way these custom events are intended to work.
When I execute this code, Here's what I think should happen.
Initially (after doc.Ready) the question2 element should be hidden.
When I click on the 'Vermont' radio button, question 2 should be made visible followed by one alert box indicating that 'question2 has been made visible'.
When I click on another radio button, question 2 should be hidden followed by one alert box indicating that question 2 has been made hidden.
What is actually happening is that I get numerous alert boxes when making question 2 visible, and none when I hide it?
Please help me understand why it's doing this.
Here is the script:
<script type="text/javascript">
function processRadioButtonASD() {
var isChecked = ($("input[name=question1]:checked").val() == "question1.Vermont");
if (isChecked == true) {
$("[data-uniquename=question2]").show(250);
} else {
$("[data-uniquename=question2]").hide(250);
}
}
function detectVisibilityChange(uniqueName) {
$("[data-uniquename=" + uniqueName + "]").bind("madeVisible", function () {
alert($(this).attr("data-uniquename") + " was made visible");
});
$("[data-uniquename=" + uniqueName + "]").bind("madeHidden", function () {
alert($(this).attr("data-uniquename") + " was made hidden");
});
}
$(function () {
$.each(["show", "hide"], function () {
var _oldFn = $.fn[this];
$.fn[this] = function () {
var wasVisible = $(this).is(':visible');
var result = _oldFn.apply(this, arguments);
var isVisible = $(this).is(':visible');
if ((isVisible == true) && (wasVisible == false)) {
$(this).triggerHandler("madeVisible");
} else if ((isVisible == false) && (wasVisible == true)) {
$(this).triggerHandler("madeHidden");
}
return result;
}
});
});
$(document).ready(function () {
processRadioButtonASD();
detectVisibilityChange("question2");
$("input[name='question1']").change(function () { processRadioButtonASD(); });
});
</script>
Here is the html:
<div id="content">
<div id="radioButtonASD" class="example">
<h2>radio button visibility trigger</h2>
<div data-uniquename="question1" class="question">
<label for="question1">
Question 1) (select Vermont to show Question2)
</label>
<br />
<label data-uniquename="question1.Maine">
<input name="question1" data-uniquename="question1.Maine" type="radio" value="me" />Maine</label><br />
<label data-uniquename="question1.Vermont">
<input name="question1" data-uniquename="question1.Vermont" type="radio" value="question1.Vermont" />Vermont</label><br />
<label data-uniquename="question1.NewHampshire">
<input name="question1" data-uniquename="question1.NewHampshire" type="radio" value="question1.NewHampshire" />New
Hampshire</label><br />
<label data-uniquename="question1.Conneticut">
<input name="question1" data-uniquename="question1.Conneticut" type="radio" value="question1.Conneticut" />Conneticut</label><br />
<label data-uniquename="question1.Massachusetts">
<input name="question1" data-uniquename="question1.Massachusetts" type="radio" value="question1.Massachusetts" />Massachusetts
</label>
</div>
<br />
<div data-uniquename="question2" class="question">
<label>
Question 2)
</label>
<br />
<select>
<option data-uniquename="question2.honda" value="honda">Honda</option>
<option data-uniquename="question2.volvo" value="volvo">Volvo</option>
<option data-uniquename="question2.saab" value="saab">Saab</option>
<option data-uniquename="question2.mercedes" value="mercedes">Mercedes</option>
<option data-uniquename="question2.audi" value="audi">Audi</option>
</select>
</div>
</div>
</div>
Thanks for looking.

Answer 1

I came up with an alternative way.
$.each(["show", "hide"], function() {
var effect = $.fn[this];
$.fn[this] = function(duration, move, callback) {
// Match the arguments
var speed = duration;
var easing = callback && move || move && !jQuery.isFunction( move ) && move;
var fn = callback || !callback && move || jQuery.isFunction( duration ) && duration;
// Wrap the callback function
var wrapped = fn;
var wasVisible = $(this).is(':visible');
fn = function(){
var isVisible = $(this).is(':visible');
$.proxy(wrapped, this);
if ((isVisible == true) && (wasVisible == false)) {
$(this).triggerHandler("madeVisible");
} else if ((isVisible == false) && (wasVisible == true)) {
$(this).triggerHandler("madeHidden");
}
};
// Run the effect with the wrapped callback
return effect.call(this, speed, easing, fn);
};
});
The idea is make use of the callback function. From there you can refactor and clean the code.
Take a look at a working example.