3

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

4

3 回答 3

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.

于 2013-09-27T20:16:20.973 回答
1

通过将代码简化为：

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

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

于 2013-09-30T14:23:06.727 回答
0

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

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

一些建议：

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

参考。1

<!-- Comment -->
<div>
    ...
</div>
于 2013-09-27T20:14:22.047 回答