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方法不是用來打開和關閉的事件，儘管somwhat混淆的名稱。 on方法用於綁定事件，而off方法用於解除事件綁定。

當你解除一個事件時，它從元素中消失了。要再次使用該事件，您必須重新綁定它，爲此您必須指定要使用的事件處理程序。僅指定事件是不夠的，因爲元素不記得之前的事件處理程序。

使用.click(func)與使用.on('click', func)具有相同的效果。