Question

I have isolated very strange bug from our current project:

index.html (demo) and iframe.html

do:

1) click at the first input and select any date

you will see – “datepicker changed inside iframe!”

2) click at the second input, write some symbols and press at any free space at the page

you will see – “usual_input changed inside iframe!” + “usual_input changed outside iframe!”

inside iframe:

<input id="datepicker" /> <input id="usual_input" />

binded at index.html to the change event at this inputs:

$(this).contents().find("#datepicker").change(... (1)
$(this).contents().find("#usual_input").change(... (2)

binded at iframe.html to the change event at this inputs:

$("#datepicker").change(... (3)
$("#usual_input").change(... (4)

But №1 dont work in any browser!

jquery ui’s datepicker trigger change event 100% correctly. why we cant bind to it outside an iframe?

Answer 1

You can access the window element of the iframe by:

$(this)[0].contentWindow.$("#datepicker")

Or this might work too:

this.contentWindow.$("#datepicker");

I hope that helped.