使用从javascript动态添加的html对象时出现问题

我在html中动态包含对象标记时遇到问题。 我们有一个外部服务，我们调用它来获取一些html片段，它包括一个对象标记、一个脚本和一个简单的html表单。我获取该内容并将其添加到页面中的div中，然后尝试执行使用包含对象的脚本。当我使用Firebug进行调试时，我可以看到代码已正确插入到页面中，但脚本在尝试访问对象时出错。在我看来，对象没有初始化。让我给你看一些代码来举例说明我的意思

getFragment使用jQuery进行ajax调用以获取内容

plugin div中包含的内容如下所示

当我调用signer2.SetParam方法时，我得到一个错误

Object #<an HTMLObjectElement> has no method 'SetParam'

对象#没有方法“SetParam”

但是当我使用页面加载内容的原始页面时，脚本工作，因此我知道对象上存在“SetParam”方法，并且脚本工作。但后来我动态地将其添加到页面时，不知何故它不起作用

这几天我在谷歌上搜索了很多，但都没有找到运气。 有人知道如何让它工作吗

致以最良好的祝愿，

---

Henrik

我在这里设置了一个测试脚本：

如果打开Firebug/Web Inspector，您将看到

SetParam

方法实际上是未定义的。我不知道它应该做什么，但在这两种情况下都没有定义。如果您试图将

标记添加到嵌入中，则可以使用domapi来实现这一点。测试脚本中有一些代码可以做到这一点，但我还是将其粘贴到这里：

var obj_signer = document.getElementById('signer');

var obj_p = document.createElement('param');
    obj_p.id = "myp2"; 
    obj_p.name = "TextToBeSigned";
    obj_p.value = "some value ...";
    obj_p.setAttribute('valueType', 'ref');
obj_signer.appendChild(e);

或者使用jQuery更快：

$("#signer").append("<param id='myp2' name='TextToBeSigned' value='some value ...' valueType='ref'></param>");

$（“#签名者”）。附加（“”）；

对于jQuery解决方案，我认为这应该是可行的：

$("input:submit").click(function(){
    $("#signer").append('<param name="TextToBeSigned" value="some value ...">');

    ... and then some more
});

$（“输入：提交”）。单击（函数（）{
$（“#签署人”）。附加（“”）；
…还有更多
});

如果页面上有多个表单，您可能希望为提交按钮指定一个

class

或

id

，并将其用作选择器

---

希望这有帮助。

首先，并非所有浏览器都完全支持对象标记 接下来，根据我的经验，jQuery（它严重依赖于

document.createDocumentFragment

）有时无法在动态创建/克隆的DOM节点上附加/触发事件，这可以解释对象无法初始化的原因

也就是说，为了尝试解决您的问题，我建议使用本机

document.createElement

和

document.appendChild

方法，而不是

jQuery.html

。您可以尝试

document.innerHTML

，但如果失败，您可以使用我前面提到的方法

我的建议是改变您的服务以替换：

<script type="text/javascript">
function addElement(parentid, tag, attributes) {
    var el = document.createElement(tag);
    // Add attributes
    if (typeof attributes != 'undefined') {
        for (var a in attributes) {
          el.setAttribute(a, attributes[a]);
        }
    }

    // Append element to parent
    document.getElementById(parentid).appendChild(el);
}
addElement('plugin', 'object', {name:"signer",id:"signer",type:"application/x-personal-signer2"});
</script>

函数addElement（父ID、标记、属性）{
var el=document.createElement（标记）；
//添加属性
if（属性类型！=“未定义”）{
for（属性中的变量a）{
el.集合属性（a，属性[a]）；
}
}
//将元素附加到父元素
document.getElementById（parentid）.appendChild（el）；
}
addElement（'plugin'，'object'，{name:'signer'，id:'signer'，type:'application/x-personal-signer2}）；

或者，如果无法更改服务返回的内容，请在将内容包含到页面后运行此操作：

<script type="text/javascript">
    /*
     * Goes through al the object tags in the element with the containerid id
     * and tries to re-create them using the DOM builtin methods
     */
    function reattachObjectTags(containerid) {
        jQuery('#'+containerid+' object').each(function(){
            var attrs = {}, el = this;
            // We're insterested in preserving all the attributes
            var saved_attrs = {}, attr;
            for(var i=0; i < 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');
            for (var a in saved_attrs) {
                new_element.setAttribute(a,saved_attrs[a]);
            }
            document.getElementById(containerid).appendChild(new_element);
        });
    }

    // Do your stuff
    var htmlSnippet = RequestModule.getFragment( dto ); 
    $('#plugin').html( htmlSnippet ).hide();
    // reattach all the object elements in #plugin
    reattachObjectTags('plugin');
</script>

/*
*使用containerid遍历元素中的所有对象标记
*并尝试使用DOM内置方法重新创建它们
*/
函数重新附加ObjectTags（containerid）{
jQuery（'#'+containerid+'object'）。每个（函数（）{
var attrs={}，el=this；
//我们习惯于保留所有的属性
var saved_attrs={}，attr；
对于（变量i=0；i

• 这都是未经检验的- 因为我没有办法启动IE并测试它，所以我在脑海中就输入了这个

---

谢谢你的帮助，但这并不能解决我的问题。实际上，我正试图在对象链接到的应用程序上调用SetParam方法。它应该是可用的，如果我在页面加载时加载对象，而不是随后动态地将其添加到页面中，它就会工作。稍后在脚本中，我尝试通过执行signer2.PerformAction（'Sign'）调用另一个方法，但该方法也不起作用。@Henrik这是Firefox仅支持IE的方法之一，因为它应该支持兼容性吗？我在任何地方都找不到关于

SetParam

的任何文档。据我所知，SetParam方法在object标记上不可用。它实际上是一个可以在底层对象本身上调用的方法。有点像他们在这个页面上使用mySwf.myFlexFunction（..）时所做的，谢谢你的帮助，但是这个解决方案也不起作用。请看我对另一个答案的评论。你好，谢谢你的回复！如果您说jQuery在随后添加对象时在附加和触发事件方面存在问题，那么您可能是对的。现在我已经解决了这个问题，在页面第一次加载时包含空的objec标记，然后在我知道它们的值并且可以工作时动态添加不同的参数

$("input:submit").click(function(){
    $("#signer").append('<param name="TextToBeSigned" value="some value ...">');

    ... and then some more
});

<script type="text/javascript">
function addElement(parentid, tag, attributes) {
    var el = document.createElement(tag);
    // Add attributes
    if (typeof attributes != 'undefined') {
        for (var a in attributes) {
          el.setAttribute(a, attributes[a]);
        }
    }

    // Append element to parent
    document.getElementById(parentid).appendChild(el);
}
addElement('plugin', 'object', {name:"signer",id:"signer",type:"application/x-personal-signer2"});
</script>

<script type="text/javascript">
    /*
     * Goes through al the object tags in the element with the containerid id
     * and tries to re-create them using the DOM builtin methods
     */
    function reattachObjectTags(containerid) {
        jQuery('#'+containerid+' object').each(function(){
            var attrs = {}, el = this;
            // We're insterested in preserving all the attributes
            var saved_attrs = {}, attr;
            for(var i=0; i < 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');
            for (var a in saved_attrs) {
                new_element.setAttribute(a,saved_attrs[a]);
            }
            document.getElementById(containerid).appendChild(new_element);
        });
    }

    // Do your stuff
    var htmlSnippet = RequestModule.getFragment( dto ); 
    $('#plugin').html( htmlSnippet ).hide();
    // reattach all the object elements in #plugin
    reattachObjectTags('plugin');
</script>