.bind( ) Javascript not working in Firefox & IE?

Question

I have a div that on click moves to the right, and then on click again and it goes back to the left (its a newsletter pop-out). Everything is working perfectly in Safari and Chrome, however in Firefox and IE it will only open, it won't close when you click again. I am using .bind() and .unbind() Any suggestions? I am using jQuery version 1.3.2.

FF Error : NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]

IE Error: SCRIPT16386: No such interface supported

Javascript:

$(function () {
    $('.newsletter').bind('click.open', open)
    $(window).resize(function () {
        var wWth = $(window).innerWidth(),
            wHgt = $(window).innerHeight();
        $('#overflow').fadeIn('slow').css({
            width: wWth,
            height: wHgt
        });
    });
});

function open() {
    var overflow = $('<div id="overflow"><div>');
    $(this).stop().animate({
        left: '-35'
    }, 650);
    if ($('#overflow').length < 1) {
        $('body').append(overflow);
    }
    var wWth = $(window).innerWidth(),
        wHgt = $(window).innerHeight();
    $('#overflow').fadeIn('slow').css({
        width: wWth,
        height: wHgt
    });
    $('.newsletter').unbind('click.open').bind('click.close', close)
}

function close(e) {
    if ($(e.target).is('input')) return;
    $('#overflow').fadeOut('slow')
    $('.newsletter').stop().animate({
        left: '-390px'
    }, 650);
    $('.newsletter').unbind('click.close').bind('click.open', open)
}

HTML

<div class="newsletter_signup">
<div id="newslettertext1">
    Newsletter bestellen<br>
    <br>
    Lassen Sie sich per Newsletter &#252;ber Neuheiten und <br>
    Aktionen von Tempur informieren. Jetzt anmelden
</div>
<div id="signup">
    <form id="leftnewsletter" action="" method="get">
    <input type="email" name="email" id="emailsignup" placeholder="E-MAIL ADDRESS" style="margin-left:76px; margin-top:16px; width:187px;">
    <input type="submit" name="signupbtn" id="signupbtn" value="SIGN UP" class="signupbutton">
</form>
</div>
<div id="newslettertext2">
    *Sie k&#246;nnen jederzeit Ihre Einwilligung zum Erhalt des<br>
Newsletters zur&#252;ckziehen und sich abmelden.
</div>

Answer 1

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

There is detailed post in the past discussing it.

In short, .bind() is kept just for the compatibility purpose, we should forget it and use the more flexible .on() instead.

For your problem, change your bind() statement from:

$('.newsletter').bind('click.open', open)

into:

$(document).on('click', '.newsletter', open);

---

UPDATE:

Since you are using a very early version of jQuery, I guess the best choice you have is to use .noConflict to load the two versions together. jQuery has changed a LOT since 1.3. It is understandable that you might hesitate to upgrade, since your old code might have used some old functions like browser detection, etc.

So here is how you do it:

jqNew = jQuery.noConflict( true );

Then you will use jqNew(document).on(event, selector, function); or whatever to bind your event. The old code will continue to use $.xxx.

There is an example here. Scroll that page down to the section: Example: Load two versions of jQuery (not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery.

Answer 2

Got it working by simplifying the code down to:

$('.newsletter_signup').click(function(event) {
    if(!$(event.target).is('input')) {
        if (parseInt($(this).css('left')) == -35) {
            $(this).stop().animate({ left: '-390px' }, 650);
        } else {
            $(this).stop().animate({ left: '-35px' }, 650);
        }
    }
});

Works perfectly now, thank you all for your help! :)