在回调内绑定/取消绑定

Question

我遇到了来自垃圾浏览器的各种各样的问题，我似乎无法用我读过的任何东西来克服这些问题。情况是这样的...我正在使用第三方插件来生成图库。该插件带有图片更改回调，每次更改图像时都会触发该回调。

我想做的是为两个 div 添加 css...其中一个是包装 div，当单击子 div 时它将滑出，并在再次单击子 div 时滑回。

这是回调：

        changepicturecallback: function(){
                    $('.sxpp_commentsImage').unbind(toggle);
    oldWidth = $('.pp_pic_holder').width() - 20,
    newWidth = $('.pp_pic_holder').width() + (200),
    newHeight = $('.pp_hoverContainer').height(),
    cImageAlign = newWidth - 20;

                var toggle = function() {
                   if(newWidth == $('.sxpp_comments').width()){
                        $('.sxpp_comments').animate({width: oldWidth});
                            }else{
                        $('.sxpp_comments').animate({width: newWidth});
                    }
                }

            $('.sxpp_comments').width(oldWidth).css('background-color','red'); 
      $('.sxpp_commentsImage').css({'float':'right','background-color':'green','width':'20px','height':newHeight});     
            $('.sxpp_commentsImage').bind('click',toggle);      
  }

这在 FF4 和 FF4 中工作得很好。 Chrome...但是，就好像 Internet Explorer 中没有发生“绑定”。我一直在阅读“.live”和“.live”。 “.delegate”方法，但（A）我不熟悉它们是如何工作的（B）如果可以清除更改上的“.live”，然后将其添加回来，就像我对绑定所做的那样。

有什么见解或我可能会忽略的事情吗？

编辑***...单击链接时会动态创建 div（显示灯箱）。所以从我读到的所有内容来看……绑定事件无论如何都是错误的路线。

Answer 1

如果您想在回调中取消绑定事件函数，只需使用以下命令：

$('body').bind('click', function(evt){
    console.log('I will be written only once');
    $(this).unbind(evt);
})

Answer 2

• bind() 用于页面加载时存在的元素。适合静态。
• live() 是动态生成元素的唯一解决方案。动态的唯一选择。

您应该取消绑定诸如 click 或 toggle 之类的事件，而不是实际的函数名称，这可能是您的问题。

Answer 3

尝试

$('.sxpp_commentsImage').unbind("click", toggle);

而不是

$('.sxpp_commentsImage').unbind(toggle);

编辑：

或使用：

$('.sxpp_commentsImage').bind('click.myEvent', toggle);

然后

$('.sxpp_commentsImage').unbind('click.myEvent');

在取消绑定时不会声明切换。