jquery - Problem using dynamically added html-object from javascript -

i have problem dynamically including object-tag in html. have external service call html-fragment, includes object-tag, script , simple html-form. take content , add div in page , try execute script uses included object. when debug using firebug can see code correctly inserted in page script gets error when tries access object. seems me object isn’t initialized. let me show code exemplify mean.

getfragment makes ajax call using jquery content.

var htmlsnippet = requestmodule.getfragment( dto ); $('#plugin').html( htmlsnippet ).hide(); 

the included content in plugin-div looks this

<div id="plugin" style="display: none; ">     browser:     chrome     <object name="signer" id="signer" type="application/x-personal-signer2"></object>  <form method="post" name="signerdata" action="#success">     <input name="nonce" value="asyhs..." type="hidden">     <input name="signature" value="" type="hidden">     <input name="encodedtbs" value="u2l..." type="hidden">     <input name="provider" value="nexus-personal_4x" type="hidden">      <input type="submit" onclick="dosign()" value="sign"> </form> </div> 

the javascript tries use “signer” object looks this:

function dosign(){     var signer2 = document.getelementbyid("signer");     retval = signer2.setparam('texttobesigned', 'some value...');     ... , more } 

it’s when call signer2.setparam method error saying

object #<an htmlobjectelement> has no method 'setparam' 

but when use original page content loaded when page loads script works know ‘setparam’ method exists on object , script works. somehow doesn’t work when dynamically add page afterwards.

i’ve googled lot last couple of days no luck. have idea on how work?

best regards, henrik

first of object tag not supported in browsers (source) next, experience, jquery (which heavily relies on document.createdocumentfragment) fails attach/trigger events on dynamically created/cloned dom nodes, explain why object failed initialize.

that said, try , fix problem, suggest using native document.createelement , document.appendchild methods instead of jquery.html. can try document.innerhtml if fails, can go ones mentioned earlier.

my suggestion either alter service replace:

<script type="text/javascript"> function addelement(parentid, tag, attributes) {     var el = document.createelement(tag);     // add attributes     if (typeof attributes != 'undefined') {         (var in attributes) {           el.setattribute(a, attributes[a]);         }     }      // append element parent     document.getelementbyid(parentid).appendchild(el); } addelement('plugin', 'object', {name:"signer",id:"signer",type:"application/x-personal-signer2"}); </script> 

or if cannot change content returned service, run after include content onto page:

<script type="text/javascript">     /*      * goes through al object tags in element containerid id      * , tries re-create them using dom builtin methods      */     function reattachobjecttags(containerid) {         jquery('#'+containerid+' object').each(function(){             var attrs = {}, el = this;             // we're insterested in preserving attributes             var saved_attrs = {}, attr;             for(var i=0; < el.attributes.length; i++) {                 attr = el.attributes.item(i);                 if(attr.specified) {                     saved_attrs[attr.nodename]=attr.nodevalue;                 }             }             this.parentnode.removechild(this);              var new_element = document.createelement('object');             (var in saved_attrs) {                 new_element.setattribute(a,saved_attrs[a]);             }             document.getelementbyid(containerid).appendchild(new_element);         });     }      // stuff     var htmlsnippet = requestmodule.getfragment( dto );      $('#plugin').html( htmlsnippet ).hide();     // reattach object elements in #plugin     reattachobjecttags('plugin'); </script> 

• this untested - typed off top of mind, since don't have means fire ie , test this.