EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: ifcwlme on December 18, 2017, 06:45:06 PM

Title: How to add event handler to a tab in javascript ?
Post by: ifcwlme on December 18, 2017, 06:45:06 PM

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

Title: Re: How to add event handler to a tab in javascript ?
Post by: ifcwlme on December 18, 2017, 06:50:43 PM

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.

Title: Re: How to add event handler to a tab in javascript ?
Post by: ifcwlme on December 18, 2017, 07:05:54 PM

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?

Title: Re: How to add event handler to a tab in javascript ?
Post by: stworthy on December 18, 2017, 11:23:03 PM

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')
	}
})