The click event is detected in an already existing iframe, but when you append another one, there is no more interactivity with it, even with the .on() method. I'm attempting to assign event handlers to elements within the iframe but only after a click occurs on the document.
Steps to reproduce the test 1: http://jsbin.com/aserix/1/
Click on the gray bar of the jQuery UI's tabs and then immediately red bar in the iframe. Note that the message "Click on iframe: # RedX" appears below. You can test this result in the 'First Tab' and 'Second Tab'. After that, click the 'New Tab'. A new tab is created, however interactivity with this iframe crashes. Observe whether the three tabs are identical, but only the first two that were created in development time are running.
Another example: http://jsbin.com/ofecog/5/
Click on the button 'Add Tab' and then the gray bar of the jQuery UI's tabs. After that, click the 'Go Another Page!'. A new tab will be created and the solution works as expected. Recharge again the example, click the 'Add Tab' and then on the link 'Go Another Page!'. The page will be loaded the same tab.
I've posted these examples in several forums and nobody knows why this happens. I tried several ways, and I realize when a tab is dynamically created things crash.
Already I appreciate your attention.
Kind regards, Christian