使用JQuery在按钮上添加onclick操作

Question

我有一个按钮,已经有一个onclick事件和一个指定的功能.我希望在它前面添加另一个函数调用.我可以想象应该可以摆弄onclick属性(attr),但我不认为这是最佳实践.

您认为在现有onclick事件上添加函数调用的最佳做法是什么？

Answer 1

如果你不害怕搞乱jQuery的胆量:

// "prepend event" functionality as a jQuery plugin
$.fn.extend({
  prependEvent: function (event, handler) {
    return this.each(function () {
      var events = $(this).data("events"), 
          currentHandler;

      if (events && events[event].length > 0) {
        currentHandler = events[event][0].handler;
        events[event][0].handler = function () {
          handler.apply(this, arguments);
          currentHandler.apply(this, arguments);
        }      
      }
    });
  }
});

$("#someElement").prependEvent("click", function () {
    whatever();
});?

现场观看:http://jsfiddle.net/Tomalak/JtY7H/1/

请注意,必须已经有一个currentHandler或该功能不会做任何事情.

免责声明:我认为这是一个黑客.这取决于jQuery内部可能会在下一版本的库中发生变化.它现在有效(我测试了jQuery 1.7.2),但是如果它打破了未来版本的jQuery,也不要感到惊讶.

Answer 2

我在这里写了一个简短的例子:

?$("button").click(function() { // this is already existing
    if ($("span").length) {
        alert("ok");
    }
});

var clicks = $("button").data("events").click.slice();
$("button")
    .unbind("click")
    .click(function() { // this is the new one which should be prepended
        $("body").append($("<span>"));
    });
$.each(clicks, function(i, v) {
    $("button").click(v);
});

​