Assign an existing click event function to another click event using jquery
- by Peter Delahunty
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?
