0

我知道我可以轻松解决这个问题，但我正在寻找这种情况下的最佳实践。这是一个简化版http://jsbin.com/isered/3/edit。我正在尝试创建一个用于重用的函数，但我需要它以便在触发事件时（即单击锚标记），它只附加一次输出区域，而不是每次调用该函数时。

jQuery/Javascript

$(function () {

   function foo () {
      $('a').on('click', function () {
      $('.asdf').append('poo');
    });
   }

   foo ();
   foo ();
});

HTML

<a href='#'>hello</a>
<a href='#'>world</a>

<p class='asdf'></p>
4

5 回答 5

2

您可以创建一个状态变量，在本例中为一个类：

$(function () {
  function foo() {
    $('a:not(.clicked)').on('click', function() {
      $(this).addClass('clicked');
      $('.asdf').append('poo');
    });
  }

  foo();
  foo();
});
于 2012-07-13T00:16:34.300 回答
2

您可以在绑定之前取消绑定事件：

function foo () {
  $('a').off('click').on('click', function () {
      $('.asdf').append('poo');       
  });
}

虽然我不明白为什么只调用一次函数不是最好的解决方案。

于 2012-07-13T00:17:10.937 回答
1

当我只想制作一个容器但在随后的点击中处理其余的功能时，我通常会遇到这种情况。在这种情况下，我检查容器是否存在，如下所示：

var foo = function(){
    $('a').on('click', function(ev){
       if (!$('.asdf .foo').length) {
           $('.asdf').append('<div class="foo">');
       }
       // do other click stuff here
    });
};
于 2012-07-13T00:20:51.053 回答
0

Underscore.js 已经有了这个功能。

那么为什么要重新发明轮子。

_.once(function) 创建只能调用一次的函数版本。对修改后的函数的重复调用将无效，返回原始调用的值。对于初始化函数很有用，而不是必须设置一个布尔标志，然后再检查它。

例子：

$(function () {

  var foo = _.once(function() {
    $('a').on('click', function () {
      $('.asdf').append('poo');       
    });
  });

  foo ();
  foo ();
});
于 2012-07-13T00:17:22.137 回答
0 
$(function () {
    function foo () {
        $('a').on('click', function () {
            var num = $('.asdf').text().length;
            if (num == 0) {
                $('.asdf').append('poopsicles');
            }
        });
    }

    foo();
    foo();
});

我想这个问题已经得到了回答，但是你去吧。

于 2012-07-13T00:37:21.487 回答