Load easyui-window markup only when needed

[snowsnow]

I have a easyui-window with lots of content. However, the window is rarely needed in my application.
Because of that I would like to load the code <div class=easyui-window>(lots of stuff here)</div> not on page load, but only when the user needs it.
How is this best done with easyui? Thanks! 

[jarry]

Create a closed window and set 'href' property to indicate what content page will be loaded. This content page does not been loaded until the window is opened.

Code:

<div id="w" class="easyui-window" title="Basic Window" closed="true" href="content.html" style="width:500px;height:200px;padding:10px;">
</div>

[snowsnow]

Thanks!!
The html nodes that make up the window are added to the DOM after page load ... so I guess I have to observe events (e. g. 'click') inside the <window> with jQuery's delegate function .on().

Does easyui offer a solution for that? That'd be great.

[jarry]

Why do you want to listen for the click event on window? If so please try this.

Code:

$(function(){
	$(document).on('click','.window',function(e){
		console.log('click')
	})
})

[snowsnow]

Thanks for the sample code, that's exactly how I do it. I thought there was some easyui specific way of doing this, that is why I asked.

My window contains several buttons the user can click to perform certain tasks, that is why I need a event listener for the window.

[jarry]

The linkbutton has the built-in 'onClick' event. You can use it to perform the clicking action.