Подготовьте действие onclick на кнопке с помощью JQuery

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

Вы можете добавить функцию на одно событие, но я стараюсь избегать двух функций в событии onclick. Вместо этого вы можете
1. Добавьте новый код в существующую функцию.
2. Добавьте вызов к новой функции из существующей функции.

Answer 3

Если вы переплетены событие, как этот

$(elem).on('click', functionName); 

вы можете изменить, что как это:

$(elem).on('click', function(){ 

anotherFunctionNameOrWhateverYouWant(); 

functionName(); 
}); 

Answer 4

Я не думаю, что есть способ предварять вызов функции на существующий OnClick однако вы можете попробовать следующее:

$('#foo').unbind('click'); 
$('#foo').click(function() { 
    // do new function call.. 
    // call original function again... 
}); 

Надеюсь, что это поможет.

Answer 5

Я написал короткий example здесь:

​$("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); 
});