jQuery on() 不工作

Question

我有下面的代码，它对 div (#feedback-form-container) 进行动画处理以滑入和滑出，单击时它会跳到屏幕中心，然后关闭这些幻灯片动画。一旦 div 中的表单被提交并且表单返回到原来的位置，我想再次打开这些动画，但这不起作用。我尝试使用 on() 来实现此目的，但没有成功。有人能发现问题吗？我被难住了。

/////////////////////feedback form animation//////////////////////
jQuery(document).ready(function($) {
  //find center of screen
  var $screenwidth = $(window).width();
  var $screencenter = $screenwidth / 2 - 177;
  var $startpos = $screencenter + 260;
  var overlay = jQuery('<div id="simpleoverlay"> </div>');

  //hover to slide functions
  $('div#feedback-form-container').hover(function() {
    $('div#feedback-form-container').animate({
      left: '+=260px'
    },
    '2000');
  },

  function() {
    $('div#feedback-form-container').animate({
      left: '-=260px'
    },
    '6000');

  });
  //click to slide to center of screen
  $('div#feedback-form-container').click(function() {
    $('div#feedback-form-container').animate({
      left: '+=' + $screencenter
    },
    {
      duration: '2000',
      easing: 'swing',
      complete: setTimeout(function() {
        overlay.appendTo(document.body)
      },
      500)
    });

    //unbind functions
    if ($('div#feedback-form-container').is(':animated')) $('div#feedback-form-container').off('click').off('hover');
    //set cursor back to default
    $('div#feedback-form-container').css('cursor', 'default');

  });

  $('#wpcf7-f52-t1-o1').submit(function() {

    $('div#feedback-form-container').animate({
      left: '-=' + $startpos
    },
    '6000');

    $('div#feedback-form-container').on('hover').on('click');
  });

Answer 1

尽管名称有些令人困惑，但 on 和 off 方法并不用于打开和关闭事件。 on 方法用于绑定(bind)事件，off 方法用于取消绑定(bind)事件。

当您取消绑定(bind)事件时，它就会从元素中消失。要再次使用该事件，您必须再次绑定(bind)它，为此您必须指定要为其使用的事件处理程序。仅指定事件是不够的，因为该元素不记得之前的事件处理程序。

使用.click(func)与使用.on('click', func)效果相同。