.bind()。live()无法在Safari或Chrome中运行,但可以在Firefox中使用

时间:2014-04-21 22:33:00

标签: javascript jquery google-chrome firefox safari

我对此很新。有人能指点我正确的方向吗?

我的网站大多以我想要的方式在Firefox中运行,但现在我尝试在Safari或Chrome中测试它,它不起作用。我确定以后会遇到更多问题,但第一个问题是我正在处理的是我的主导航按钮不起作用。点击处理程序mouseleavemouseenter无效。

此代码是否有问题,或者在其他地方是否有问题?

function onLoad () {
    var $list= $('#mainNavList');
    showMainMenu(); //make menus appear 
    specifyScrollingElement('#mainNavList');
    specifyScrollingElement('#lowerNav');
    $list.find('.linkInactive').live('click', onMainNavMenuClick);
    $('.albumLink').parent().bind('mouseenter',function(){
      $(this).css({'background-color': '#fff'});
      });

     $('.albumLink').parent().bind('mouseleave',function(){
          if ($(this).hasClass('current')==false){
            $(this).css({'background-color': 'rgba(233,229,194,.9)'});
          };
     });

    $('.textLink').parent().bind('mouseenter',function(){
      $(this).css({'background-color': 'rgba(65,65,65,.8)'});
      });         
     $('.textLink').parent().bind('mouseleave',function(){
        if (portfoliosActive ==false && $(this).children().hasClass('portfolioButton')==true ){
        $(this).css({'background-color': 'transparent'});
          };
        if (portfoliosActive ==true && $(this).children().hasClass('homeButton')==true){
             $(this).css({'background-color': 'transparent'});
          };
    }); 
    $list.find('.linkActive').live('click',function(){
          var $this = $(this);
          $this.addClass('linkInactive').removeClass('linkActive');         
          hideThumbs($list);
    });                   
    thumbnailActions('#mainNavList');
    thumbnailActions('#lowerNav');
    initUpperNavActions();  
}

3 个答案:

答案 0 :(得分:0)

使用''而不是' bind'并且“活着......”这应该可以为你节省一个痛苦的世界。 从jquery 1.7开始,这些方法已被弃用。

有关详细信息,请参阅以下链接:http://api.jquery.com/bind/

As of jQuery 1.7, the .on() method is the preferred method for attaching
event handlers to a document. For earlier versions, the .bind() method is
used for attaching an event handler directly to elements. Handlers are
attached to the currently selected elements in the jQuery object, so those
elements must exist at the point the call to .bind() occurs. For more flexible
event binding, see the discussion of event delegation in .on() or .delegate().

还有:http://api.jquery.com/live/

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach
event handlers. Users of older versions of jQuery should use .delegate()
in preference to .live().

使用' on'你的代码将是:

$('.albumLink').parent().on('mouseenter',function(){
    $(this).css({'background-color': '#fff'});
});

答案 1 :(得分:0)

你应该使用.on()它绑定并持续存在。我在chrome中使用它没有任何问题。

$(".albumLink").on('click', function () { 
    $(this).css({'background-color': 'rgba(65,65,65,.8)'});
});

http://api.jquery.com/on/ 如果您使用的是较旧的jQuery,则可能必须使用delegate() http://api.jquery.com/delegate/

**注意:委托切换参数顺序。在后来的Jquery(1.7).delegate()只是.on()的别名

HTH

答案 2 :(得分:0)

我无法上班或委托上班。我想我仍然对如何使用jquery感到困惑。

但我弄清楚问题出在我的点击和鼠标中心并且mouseleave无效。我在代码中发现了一个额外的"</div>",所以我认为有一个不可见的div阻挡了我的导航按钮。删除后,按钮全部突然在Safari和Chrome中运行!谢谢你的时间!