simplemodal click events stopped working in IE7

Question

Here's my code:

$('#alertInfo').modal({
    close :false,
    overlayId :'confirmModalOverlay',
    containerId :'confirmModalContainer',
    onShow : function(dialog) {
        dialog.data.find('.message').append(message);

        dialog.data.find('.yes').click(function(){
            if ($.isFunction(callback)) callback.apply();
            $.modal.close();
        });

        dialog.data.find('.close').click(function(){
            $.modal.close();
        });  
    }
});

Basically, this is a dialogue box which I call to show a warning message that has a "X" button (with class 'close') and an "OK" button (with class 'yes').

The problem occurs in IE7. When I call this dialogue box and use my "X" button to close it everytime, my "X" button does not work anymore on the third time I call it (YES ON THE THIRD TIME!). However, if I use my "OK" button to close the dialogue box, it works fine no matter how many times I call it.

I thought I found a workaround by unbinding and binding my click event of the '.close' class (instead of using the jquery click method), as below:

dialog.data.find('.close').unbind('click');
dialog.data.find('.close').bind('click',function(){$.modal.close();});

and it worked!!! unfortunately, however, the problem now occurs in my "OK" button. so, i did the same unbinding and binding the click event of the '.yes' class, as below:

dialog.data.find('.yes').unbind('click');
dialog.data.find('.yes').bind('click',
    function() {
        if ($.isFunction(callback)) callback.apply();
        $.modal.close();
});

BUT NOPE, IT DOES NOT WORK.. please help me.. @ericmmartin, i hope you're online now.. huhu..

NEW OBSERVATION: If I place the unbinding/binding of class '.close' before class '.yes', the problem occurs in my "X" (with class '.close') button.. as below:

$('#alertInfo').modal({
    close :false,
    overlayId :'confirmModalOverlay',
    containerId :'confirmModalContainer',
    onShow : function(dialog) {
        dialog.data.find('.message').append(message);

        dialog.data.find('.close').unbind('click');
        dialog.data.find('.close').bind('click',
            function(){
                $.modal.close();
        });

        dialog.data.find('.yes').unbind('click');
        dialog.data.find('.yes').bind('click',
            function(){
                if ($.isFunction(callback)) callback.apply();
                $.modal.close();
        }); 
    }
});

WHY OH WHY?!

Answer 1

For starters, for the "X" use a class of "simplemodal-close" instead of just "close". SimpleModal will handle binding the close function to the click event of that element.

Second, you shouldn't need to do the unbind/bind. The following should work:

$('.yes', dialog.data[0]).click(function () {
    if ($.isFunction(callback)) {
        callback.apply();
    }
    $.modal.close();
});

If not, perhaps there is something else going on in your code...