Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#9261 closed bug (notabug)

Element without interactivity when a new tab is created

Reported by: christianbalz Owned by: christianbalz
Priority: minor Milestone: none
Component: ui.tabs Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:

Description

The click event is detected in an already existing iframe, but when I append another one, there is no more interactivity with it, even with the .on() method.

I'm not sure about it, but the problem seems to be caused by the jQuery UI's tab. When I remove the tabs, and simply add an iframe with the append() method, it works.

In my first example, this works when tabs 1 and 2 have already been created. However, if I create a new tab the click doesn't work anymore.

Step to reproduce: click in red bar in Oracle Site.

http://jsbin.com/aserix/1/

In another example similar to the previous, but this time I'm not using iFrameTrack. I click in an iframe and open the link in a new tab, but it does not work, and the new link opens in the same tab. However, if I click on any point on the screen that is outside the iframe the new tab is created.

Step to reproduce: click in "new tab" after "click here". This test open in the same tab. In another test, click in "new tab" after silver bar and "click here", This create a new tab.

http://jsbin.com/abilog/1/

Kind regards, Christian

Change History (9)

comment:1 Changed 6 years ago by tj.vantoll

Owner: set to christianbalz
Status: newpending

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.

comment:2 in reply to:  1 Changed 6 years ago by christianbalz

Status: pendingnew

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

comment:3 Changed 6 years ago by Scott González

Status: newpending

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.

comment:4 in reply to:  3 Changed 6 years ago by christianbalz

Status: pendingnew

Hi Scott Gonzalez,

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

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

Thanks in advanced, Christian

comment:5 Changed 6 years ago by Scott González

Resolution: notabug
Status: newclosed

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

comment:6 in reply to:  5 Changed 6 years ago by christianbalz

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

comment:7 Changed 6 years ago by Scott González

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.

comment:8 in reply to:  7 Changed 6 years ago by christianbalz

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

comment:9 Changed 6 years ago by Scott González

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.

Note: See TracTickets for help on using tickets.