Question

我有一个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>

Answer 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。

Answer 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);
        }
    }
});

现在工作完美，谢谢大家的帮助！：）

Answer 3

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

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

一些建议：

更新你的jQuery核心版本，你的插件无法在1.3.2上运行;验证最小版本是1.6.4，对于旋转木马我不知道（...）
检查在您未被包装的节点附近没有任何评论使用插件（参考1）
检查DOM节点上是否有（直接或非直接）getComputedStyle 哪个不能有样式（例如文本节点）

<强> REF。 1

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

.bind（）Javascript在Firefox＆amp; IE浏览器？

3 个答案: