How to find out what JavaScript function triggered HTML change?

Question

I am having a problem on a WordPress site. I have a function which slides down a certain <div> . It is:

jQuery(function($){
    $(document).on('click','.tb_usertask_title',function(){
        var title = $(this);
        var key = title.data('key');
        var msg = $('#tb_msg_'+key);
        msg.slideDown('fast');
    }
});

After executing this function, the <div> slides up again immediately. I think this might be due another script, but I have absolutely no idea how to find which function does this. Is there any way of finding this out? Things I have tried:

• Adding breakpoints in my function. This showed me that the folding up happened outside my function.
• Using Firebug to break on HTML change. This however redirected to jquery.js, but I did not know how to find out which function triggered the jQuery.
• Using Firebug to list the events of my onclick event, but this only showed my function.

These didn't work for me. I also searched for a way to do a function backtrace in Firebug, but without any success.

Answer 1

1. Use unminified version of jQuery (just for the test and because its more easy to debug).
2. Look for the dispatch function.
3. Put a breakpoint in the function where there is an apply usage.
4. After the code breaks use the F11 to navigate to the binding function.