Weird Javascript Behavior -- 2 clicks to fire (Sorry, Dont know where else to turn)

[Mark Billion]

Here's the script.  When I click it on load, works like a charm.  When I click it via a dynamically created element, the first click sees the actual html shift (kind of stretch and go back).  It does however work on the second click consistently.     

<script>

$(document).on('click', '.iframe_add', function(){        

    var element = $(this).attr('name');

    $('#iframe_target').html('<iframe src="https://104.131.18.58/t3/default/ajax_new_secured_asset_debt_creator?all='+element +'" frameborder="0" width="580" height="300" scrolling="yes" id="myFrame"></iframe>');

                            });    

    

</script>

Only thing I found is: http://stackoverflow.com/questions/24487664/jquery-on-click-doesnt-work-on-first-click-with-a-dynamic-element

I dont really get whats going on and Id  appreciate any help.

[Massimo Di Pierro]

Hello Mark,

can you explain one moment the big picture. What do you want your app to do?

Massimo

[Stuart Rolinson]

Hi Mark,

Can you pull together a simple example showing this with your HTML, CSS and Javascript.  I understand what you are trying to do but I need to see more in order to understand when the click event is being applied to the .iframe_add objects.

Thanks

Stuart

[Mark Billion]

Ok. So here is the hackity-hack solution I came up with (if you cant beat em -- and by em, I mean javascript, join em):

parent.document.getElementsByClassName("iframe_input")[0].click();

I just force a click on the first input element when the modal hides and this seems to resolve the behavior.  That being said, this seems really hacky and Im all ears as to why this is wrong but it does work like a charm....