.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>

The cause might be in broken HTML layout (incorrectly closed tags). This is the most common cause of browsers behaving differently in similar situations. — keaukraine, Sep 24 '13 at 13:17
It would help to specify the jQuery version that you're using. — Spudley, Sep 24 '13 at 13:17
can you try to recreate the problem in [this fiddle](http://jsfiddle.net/arunpjohny/bWbxT/1/) it seems to be working fine in FF — Arun P Johny, Sep 24 '13 at 13:19
@ArunPJohny i also created a fiddle which i had been using in ff and it was working fine too, its only in my actual code? [fiddle](http://jsfiddle.net/FpEZg/2/) — Karina, Sep 24 '13 at 13:29
add few console logging statements in the handlers and see whether they are getting executed — Arun P Johny, Sep 24 '13 at 13:35
First thing to do is to open the FF debugger to see if any js error or warning is thrown. — TCHdvlp, Sep 24 '13 at 14:49
I am getting the error **NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]** in FF and IE — Karina, Sep 27 '13 at 11:13
Works fine here here with jQuery 1.3.2 http://jsfiddle.net/aneSm/; FF and IE version? — Irvin Dominin, Sep 27 '13 at 11:23
Yes, it just seems to be in my actual coding, could there be a conflict or something? — Karina, Sep 27 '13 at 11:28
It's possible; can you provide more context, other code plugins, and so on? — Irvin Dominin, Sep 27 '13 at 11:34
Theres quite a few plugins used, like **jquery.jcarousel.pack.fixed.js**, **jquery.validate.js** and so on.... it tells me the problem is with **jquery-1.3.2.min.fixed.js** when i go into firebug > console? — Karina, Sep 27 '13 at 11:49
Can you update your old 1.3.2 jQuery core version? The validate min version is 1.6.4, for carousel I don't know — Irvin Dominin, Sep 27 '13 at 12:22
I will check with my collegue first as i know he told me before there was a reason they haven't updated jQuery version, but i can't remember, thank you for your help! — Karina, Sep 27 '13 at 12:47
Ok let me know if the issue is related to the jQuery versione, so I'll add the comment as answer — Irvin Dominin, Sep 27 '13 at 12:49

score 1 · Answer 1 · edited May 23 '17 at 12:07

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.

I was using the on/off method before bind, however i was experiencing the problem of the newsletter not opening at all? And thats why i tried using bind — Karina, Sep 30 '13 at 08:34
Just updated the answer. You might want to consider loading a new version of jQuery beside the old one. — Blaise, Sep 30 '13 at 13:45

score 1 · Accepted Answer · answered Sep 30 '13 at 14:23

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! :)

score 0 · Answer 3 · answered Sep 27 '13 at 20:14

Is difficult to say where the problem is, probably is somewhere in your HTML code and its manipulation.

Your sample code works on jQuery 1.3.2: http://jsfiddle.net/aneSm/

Some suggestions:

update your jQuery core version, your plugin can't run on 1.3.2; the validate min version is 1.6.4, for carousel I don't know (...)
check to not have any comment near a not wrapped node on which you use a plugin (ref. 1)
check if you have a (direct or not) getComputedStyle on a DOM node which can't have styles (such as a text node)

ref. 1

<!-- Comment -->
<div>
    ...
</div>

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

3 Answers3