How to add event handler to a tab in javascript ?

[ifcwlme]

I have created a Tab panel with many tabs. All the tabs are created dynamically. After the tab is created. I want to an event handler to one of the tab without re-init the whole tab panel. How to do it ?

Thanks

[ifcwlme]

I can't find any "addEventHandler" method in any EasyUI component. If I have to re-init the tab. I have to store the tab config when it is created. And re-init all of them. Say 10+ tabs. I think it is not a good solution.

[ifcwlme]

I found a "update" method in Tabs. It seems require I provide the content again. But at the moment, the content in the created tab is dynamic and complex. It is hard to re-init it. Any work around to the problem?

[stworthy]

You can override the 'options' to attach event handlers. The code below shows how to attach the 'onOpen' and 'onClose' events on the first tab panel.

Code:

var p = $('#tt').tabs('getTab', 0);
$.extend(p.panel('options'), {
	onOpen: function(){
		console.log('opened')
	},
	onClose: function(){
		console.log('closed')
	}
})