Element without interactivity when a new tab is created

Hi christianbalz,

Thanks for taking the time to contribute to the jQuery UI project.

I've been looking at your second example and I'm still not exactly sure what's supposed to be happening. You're attempting to assign event handlers to elements within the iframe but only after a click occurs on the document?

There is a lot going on in your test cases so it is a bit difficult to figure what the problem is. Can you please reduce the amount of code being used to show the problem that you're seeing. We'll want any external dependencies and anything specific to your use case removed as much as possible.

Thanks.

Hi tj.vantoll,

Thank you for your feedback. I tried to simplify the code a bit to facilitate your analysis. The only reference that exists is for a simple page that contains a link to a web site. Note that, clicking on the gray bar and then on the link inside the iframe a new tab is created, however, if you click directly on the link will open in the same tab.

I think the best example of testing is still the first test case. In that test, the two tabs created in design time work well, but the third which is created dynamically does not work. The detail is that the three tabs are the same. I don't know why this happens, but it seems that Jquery UI cancels events when the tabs are created at runtime.

http://jsbin.com/ofecog/1/

The simple page: http://jsbin.com/uvuket/1/

Kind regards, Christian

I just get a bunch of errors: Unsafe JavaScript attempt to access frame with URL http://jsbin.com/ofecog/1/edit from frame with URL http://www.oracle.com/index.html. Domains, protocols and ports must match.

Hi Scott Gonzalez,

The errors were due to the Oracle website. I changed this.

http://jsbin.com/ofecog/5/

Thanks in advanced, Christian

This seems to be doing exactly what I'd expect.

Sorry Scott, but the problem still persists.

My comment was about the errors you mentioned, and I believe it has occurred because of the external site. However, if you run the test will realize that the problem still exists.

Kind regards, Christian

I still have no idea what problem you think exists. Please list clear step by step instructions, along with when you think the actual and expected behaviors diverge.

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

I've posted these examples in several forums and nobody knows why this happens.

It's because you haven't bound any event handlers to the new iframe. You should read the jQuery Event Basics page.