Question

我正在尝试向“已创建”生命周期回调中的自定义元素内的其中一个按钮添加点击侦听器（甚至尝试过“ready”回调同样的结果）。

我被抛出错误“button element is undefined / null”。

注意：

一个。我不能像这样为整个自定义组件添加一个点击监听器。

   listeners: {
        'click': '_onClick'
    },

我只需要为按钮添加一个监听器。怎么弄这个简单的东西？对不起，我听起来很天真。

湾由于CSP限制而无法执行内联脚本

<paper-button id='saveBtn' on-click="handleClick">
     Save
</paper-button>

错误消息：

未捕获的TypeError：无法读取null
的属性'addEventListener'
Polymer.created @   元件-imports.csp.js：10596Polymer.Base._addFeature._invokeBehavior   @ elements-imports.csp.js：267Polymer.Base._addFeature._doBehavior @   elements-imports.csp.js：262Polymer.Base.createdCallback @   elements-imports.csp.js：97Polymer.Base._addFeature.instanceTemplate @   elements-imports.csp.js：535Polymer.Base._addFeature._stampTemplate @   elements-imports.csp.js：531Polymer.Base._addFeature._initFeatures @   elements-imports.csp.js：4627Polymer.attached @   elements-imports.csp.js：5612Polymer.Base._addFeature._invokeBehavior @   elements-imports.csp.js：267Polymer.Base._addFeature._doBehavior @   elements-imports.csp.js：262Polymer.Base.attachedCallback @   elements-imports.csp.js：102Polymer.Base._addFeature.attachedCallback @   elements-imports.csp.js：603Polymer.Base._addFeature._readySelf @   elements-imports.csp.js：591（匿名函数）@   elements-imports.csp.js：5554Polymer.ImportStatus._importsLoaded @   elements-imports.csp.js：5553（匿名函数）@   elements-imports.csp.js：5564checkDone @   webcomponents-lite.js：968watchImportsLoad @   webcomponents-lite.js：990（匿名函数）@   webcomponents-lite.js：939whenDocumentReady @   webcomponents-lite.js：957checkReady @ webcomponents-lite.js：952

自定义元素：

<dom-module id="my-form">
    <template>
        <div>
            <paper-input id="inputName" label="Name" required error-message="Required Input"> Name </paper-input>
            <paper-input id="inputServer" label="Server URL" required error-message="Required Input"> Server </paper-input>
            <paper-input id="inputUsername" label="Username" required error-message="Required Input">Username</paper-input>
            <paper-input id="inputPassword" label="Password" type="password" required error-message="Required Input" value="">Password</paper-input>
            <div class="rows layout horizontal right-justified certificate">
                <paper-button id='cancelBtn' tabindex="0">Cancel</paper-button>
                <paper-button id='saveBtn' tabindex="0">Save</paper-button>
            </div>
        </div>
    </template>
</dom-module>
<script>
Polymer({

    is: 'my-form',

    created: function() {
        var saveBtn = document.querySelector('#saveBtn');
        saveBtn.addEventListener('click', function() {
            document.getElementById('inputName').validate();
            document.getElementById('inputServer').validate();
            document.getElementById('inputUsername').validate();
            document.getElementById('inputPassword').validate();
        });
    },
});

Answer 1

on-click="handleClick"

不是内联代码，它只是一个属性，因此它在CSP下运行正常。

（）创建

太早了，你的元素尚未制作。

准备（）

您的元素是在此时制作的，但它们不一定在document中，因此使用document.querySelector（或document.getElement*）是一个坏主意。

但是，Polymer通过id提供了模板中元素的地图作为名为$的属性，因此您可以编写var saveBtn = this.$.saveBtn（但您应该使用on-click代替）。

如何向聚合物自定义元素的子元素添加单击侦听器？

1 个答案: