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.

我已尝试使用live / die并绑定/取消绑定，但没有运气。

Answer 1

哇，这只是一个争论错误。

var myFunction=function(element){ ---＆gt;你只是期望一个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>

注意：我不知道这是否是最佳解决方案

在jQuery中无法取消绑定添加的功能

2 个答案: