.bind() Javascript 在 Firefox 和 IE 中不起作用？答案

【问题标题】：.bind( ) Javascript not working in Firefox & IE?.bind() Javascript 在 Firefox 和 IE 中不起作用？
【发布时间】：2013-09-24 13:11:45
【问题描述】：

我有一个 div，点击时向右移动，然后再次点击它又回到左侧（它是一个时事通讯弹出窗口）。在 Safari 和 Chrome 中一切正常，但在 Firefox 和 IE 中它只会打开，当您再次单击时它不会关闭。我正在使用 .bind() 和 .unbind() 有什么建议？我正在使用 jQuery 版本 1.3.2。

FF 错误：NS_ERROR_XPC_BAD_CONVERT_JS：无法转换 JavaScript 参数 arg 0 [nsIDOMWindow.getComputedStyle]

IE 错误：SCRIPT16386：不支持此类接口

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>

【问题讨论】：

能不能也分享一下相关的html
原因可能是 HTML 布局损坏（错误关闭的标签）。这是导致浏览器在类似情况下表现不同的最常见原因。
这将有助于指定您正在使用的 jQuery 版本。
你可以尝试在this fiddle 中重新创建问题吗？它似乎在 FF 中工作正常
@ArunPJohny 我还创建了一个我一直在 ff 中使用的小提琴，它也工作正常，它只在我的实际代码中？ fiddle

标签： javascript jquery html internet-explorer firefox

【解决方案1】：

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。

过去有detailed post 讨论过。

简而言之，.bind() 只是为了兼容性目的而保留的，我们应该忘记它并改用更灵活的.on()。

对于您的问题，将您的 bind() 声明从：

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

进入：

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

更新：

由于您使用的是非常早期的 jQuery 版本，我想您最好的选择是使用 .noConflict 将两个版本一起加载。自 1.3 以来，jQuery 发生了很大的变化。您可能会犹豫升级是可以理解的，因为您的旧代码可能使用了一些旧功能，例如浏览器检测等。

这就是你的做法：

jqNew = jQuery.noConflict( true );

然后你将使用jqNew(document).on(event, selector, function); 或其他任何东西来绑定你的事件。旧代码将继续使用$.xxx。

有一个例子here。将该页面向下滚动到以下部分：示例：加载两个版本的 jQuery（不推荐）。然后，将 jQuery 的全局范围变量恢复为第一个加载的 jQuery。

【讨论】：

我在绑定之前使用了开/关方法，但是我遇到了时事通讯根本打不开的问题？这就是为什么我尝试使用绑定
刚刚更新了答案。您可能需要考虑在旧版本之外加载新版本的 jQuery。

【解决方案2】：

通过将代码简化为：

$('.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);
        }
    }
});

现在完美运行，感谢大家的帮助！ :)

【讨论】：

【解决方案3】：

很难说问题出在哪里，可能是在您的 HTML 代码及其操作的某个地方。

您的示例代码适用于 jQuery 1.3.2：http://jsfiddle.net/aneSm/

一些建议：

更新你的jQuery核心版本，你的插件不能在1.3.2上运行；验证最低版本是 1.6.4，对于轮播我不知道 (...)
检查在您所在的未包装节点附近没有任何评论使用插件（参考 1）
检查您在 DOM 节点上是否有（直接与否）getComputedStyle 不能有样式（例如文本节点）

参考。 1

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

【讨论】：