Question

我正在玩聚合物时遇到一个问题 - 实际上我只是在我尝试使用Firefox或IE（11）时想出来，因为Chrome中的一切都按照我的预期运行。

所以这是一个重现我的问题的小型演示：

“Web组件已准备好使用！”在页面加载后立即显示框（但实际上它并不重要，因为此时页面上还没有自定义元素）。

单击"Insert Polymer"按钮时，使用innerHTML将纸张输入元素添加到页面中 - 只要打印标签（请参阅alertLabel()的调用），它将打印“undefined”（我想该元素尚未升级）。当我点击"Alert label"按钮后，它按预期工作。



    <html>
<head>
    <meta charset="utf-8">

    <title>Test</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">

    <script>
        window.addEventListener('WebComponentsReady', function(){alert('Webcomponents are ready to use!');});
    </script>
</head>
<body unresolved>
<button id="insertelement" onclick="insertPolymerElement();">Insert Polymer</button>
    <button id="button" onclick="alertLabel();">Alert label</button>
    <div id="placeholder"></div>
    <script>
        function insertPolymerElement(){
            document.getElementById('placeholder').innerHTML = '<paper-input id="testinput" label="I\'m the label!"></paper-input>';
            alertLabel();
        }

        function alertLabel(){
            alert(document.getElementById('testinput').label);
        }
    </script>
</body>
</html>

所以问题是：我如何确定何时可以与添加的元素进行交互？ - WebComponentsReady事件永远不会再次触发。

感谢您的帮助！

Polymer：使用innerHTML

0 个答案: