Ok so i have some html like this:

<div id="navigation">

<ul>

<li>
<a>tab name</a>
<span class="delete-tab">X</span>
</li>

<li>
<a>tab name</a>
<span class="delete-tab">X</span>
</li>

<li>
<a>tab name</a>
<span class="delete-tab">X</span>
</li>

<li class="selected">
<a>tab name</a>
<span class="tab-del-btn">X</span>
</li>

</ul>

</div>

I then have javascript that is excuted on the page that i do not control (this is in liferay portal). I want to then manipulate things afterwards with my own custom javascript.

SO...

For each of the span.delete-tab elements an on-click event function has been assign earlier. It is the same function call for each span. I want to take that function (any) and call it from the click event of the span.tab-del-btn ?

This is what i tried to do:

var navigation = jQuery('#navigation');
var navTabs = navigation.find('.delete-tab');

var existingDeleteFunction = null;

navTabs.each(function (i){
        var tab = jQuery(this);
        existingDeleteFunction = tab.click;
});

var selectedTab = jQuery('#navigation li.selected');
var deleteBtn = selectedTab.find('.tab-del-btn');

deleteBtn.click(function(event){
        existingDeleteFunction.call(this);
});

It does not work though. existingDeleteFunction is not the original function it is some jquery default function.

Any ideas?