如何在按钮单击时分配前和后功能，而不更改按钮定义或先前编写的功能

Question

I have the following buttons:

<button id="abcd" onclick="something()">click</button>

and the following functions are attached to this button apart from the one in its html definition.

$('#abcd').on('click',function(){alert("abcd");});
$('#abcd').on('click',function(){
someAjaxCallWithCallback;
});

Now I want a new function with another ajax call to execute on this button's click, before the above mentioned functions. This new function determines whether the remaining functions would be called or not based on what data is recieved by the ajax call. That is, this pre function should complete its execution before giving control over to the rest of the functions and also determine whether they would run or not.

As an example, without changing the existing validation logics and button code, I have to add a new pre-validation function and similarly and post validation function.

I have a bindFirst method using which I can at least bring my new function to the beginning of the call stack but I have not been able to contain its execution and control further delegation because of callbacks.

Answer 1

If I understand correctly, you are looking for the way to do this, without modifying html and already existing js, only by adding new js-code.

First of all, if onclick handler is set and you want to control it, you should disable it on page load (maybe, saving it to some variable):

$(document).ready(function() {
  var onclick = $("#abcd").attr("onclick").split("(")[0];
  //to run it in future: window[onclick]();
  $("#abcd").attr("onclick", "");
});

Edit: I changed my answer a little, previous approach didn't work.

Now you need to remove all already existing handlers. If number of handlers you want to control is limited, constant and known to you, you can simply call them in if-else after pre-validation inside your pre-function. If you want something more flexible, you are able to get all the handlers before removing, save them and then call them in a loop.

For that "flexible" solution in the end of $(document).ready(); you save all already existing handlers to an array and disable them. Then you write your pre-function and leave it as the only handler.

var handlers = ($._data($("#abcd")[0], "events")["click"]).slice();
$("#abcd").off("click");

$("#abcd").click(function() { 
    //this is your pre-func
    //some code        
    handlers[1].handler.call();
  });

Try console.log($._data($("#abcd")[0], "events")) to see, what it is.

Finally just run your post-function and do whatever you need, using conditions.

So, the general algorithm is as follows:

1. Disable onclick

2. Save all handlers

3. Disable all handlers

4. Run pre-func first

5. Run handlers you want to be executed

6. Run post-func

In fact, you just make your pre-func the only handler, which can run all other handlers you may need.

Answer 2

Although Alex was spot on, I just wanted to add more details to cover certain cases that were left open.

class preClass{
constructor(name,id){
    if($(id) && $(id)[0] && $(id)[0]['on'+name])
    {
        var existing = $(id)[0]['on'+name]
        $(id).bindFirst(name,existing);
        $(id).removeAttr('on'+name)
        alert("here");
    }
    if($._data($(id)[0],"events")){
        this.handlers = $._data($(id)[0],"events")[name].slice();
    }
    else
    {
        this.handlers = null;
    }
    this.id = id;
    this.name = name;
}

generatePreMethod(fn,data)
{
    $(this.id).off(this.name);
    $(this.id).bindFirst(this.name,function(){
        $.when(fn()).then(execAll(data));
    });
}
}
function exec(item,index){
    item.handler.call()
}

function execAll(handlers){
   return function(){ handlers.forEach(exec);}
}

This more or less takes care of all the cases.

Please let me know if there is something I missed!