В 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, а не элементом 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>

Примечание: Я не» t знать, является ли это оптимальным раствор