Forcing to run a custom function befor run the ass

Question

Imagine a jQuery plugin insert an element (such as an image) to the page and the image has an event handler for Click event. for example when i click the image open one popup div.

An other hand i wrote a function in my page. for example a function for slow fade an textbox (input tag).

So we have:

• A jquery plugin
• An image added by the jquery plugin -->>> id ="MyImage"
• Click event of image causes --->> popup a div
• An input tag --->> id="MyInput"
• My Function that hide the input --->> hideSlowInput()

Important note: i don't want change the plugin. i want override the event handler of the image without change the plugin.

Edit: i have not codes to open the popupdiv, i just start the plugin in the $(document).ready

Now, how can i force to open popup div after running my function every time i click the image???

Answer 1

Following @Ejay's comment

This is basically not possible, at least, not publicly supported in documentation {nothing i can find...}

But if the plugin you are talking about using jquery to bind the open popup div handler, you can try this:

//declare your function
function myfunction(){
   alert('ok');
}
//bind click handler to image with class 'myclass'
$('.myclass').click(myfunction);

//set this handler in first with keeping other already bound events
var myH = $._data( $(".myclass")[0], "events" ).click.pop();
$._data( $(".myclass")[0], "events" ).click.unshift(myH);

If there is no other click handler, you could just reverse order:

[].reverse.call($._data($('.myclass')[0]).events.click);

See a generic demo HERE

Answer 2

Following @roasted's answer

I forced old event handlers to run as callback of new event handler:

Example:

$('#myBtn').click(function(){
    alert(1);
});

$('#myBtn').click(function(){
    alert(2);
});

$('#myBtn').click(function(){
    alert(3);
});

$('#myBtn').click(function(evt){
    alert(4);
});

//------Adding A Custom Function Befor All Click Event Handlers And Forcing Theme Run As Callback Of The Custom Function--------

console.clear();
var objEvents=jQuery.extend(true, {}, $._data( $("#myBtn")[0], "events" ));
$('#myBtn').unbind('click');

var callEventHandlers=function(myEventName,myEvents){
        $.each(myEvents, function(i, event) {
            if(i==myEventName){
                $.each(event, function(j, h) {
                  //  console.log(h.handler.toString());
                    h.handler.call()
                });
            }
        });
}

$('#myBtn').click(function(evt){
    $(this).fadeOut(3000,function(){callEventHandlers('click',objEvents)});
});

Answer 3

not clear what you actually need here (unless you provide your related codes) but i think you need a delegated click event here..

since the image is added dynamically you need to use on delegated event..

 $(document).on('click','#MyImage',function(){
     alert('clicked image');
     //codes to open your popopdiv
 });

NOTE: since a image is added , you might end up having same IDS for images(unless you are adding just one image) , which is invalid.. ID should always be unique... it will be better if you can add images with class instead of id... and use class selector .Myimage..and delegating it to the closest statis parent container is better than the document itself..