在jQuery中無法解除綁定添加的功能

Question

我試圖給一個元素添加一個函數。後來我試圖刪除該功能。它不適用於jQuery。

var myFunction=function(element){ 
    $(element).animate({ 
     /* Some Code in here */ 
    }); 
    myFunction(element); // I want in a loop 
} 

/* No issues with the function */ 

/* binding this function in another place */ 
$(otherElement).on('focus', myFunction); 

/* In another location I want to off the focus on the element */ 
$(otherElement).on('focus'); --> This is not working. My expectation is the animation to be stopped. 

我已經嘗試過生活/死亡和綁定/解除綁定，但沒有運氣。

Answer 1

哇，這只是一個參數錯誤。

var myFunction=function(element){ --->你只是期望一個dom元素作爲參數。但$(otherElement).on('focus', myFunction);，傳遞給myFunction的是jQuery Event對象，而不是dom元素。

所以，試試這個：

$(otherElement).on('focus', function(ev/*this is event, not element*/) { 
    myFunction(this); 
}); 

如果你想解除綁定事件，只是用$(otherElement).off('focus');

Answer 2

嘗試

var myFunction = function(element) { 
 
    var $element = $(element).animate({ 
 
    height: 'toggle' 
 
    }, { 
 
    done: function() { 
 
     var flag = $element.data('stopAnimation'); 
 
     if (flag) { 
 
     $element.removeData('stopAnimation'); 
 
     return; 
 
     } 
 
     myFunction(element); 
 
    } 
 
    }); 
 
    // I want in a loop 
 
} 
 

 
$('#otherElement').on('focus', function() { 
 
    myFunction($('#element')) 
 
}); 
 

 
$('#otherElement').on('blur', function() { 
 
    $('#element').stop(true, true).data('stopAnimation', true); 
 
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> 
 

 
<input id="otherElement" /> 
 
<div id="element">element</div>

注：我不不知道它是否是最優的解決方案