如何在嵌套模板中添加EventListener？答案

【问题标题】：How addEventListener in nested template?如何在嵌套模板中添加EventListener？
【发布时间】：2015-03-04 05:57:42
【问题描述】：

在以下代码中：

<body unresolved fullbleed layout vertical>
    <template is="auto-binding" id="app">
        <core-ajax auto url="http://testesapi.azurewebsites.net/api/padaria" params='{"alt":"json", "q":"chrome"}' handleAs="json" response="{{produtos}}" id="ajax"></core-ajax>
        <template id="template2" repeat="{{prod in produtos}}">
            <form class="myForm" is="ajax-form" action="http://testesapi.azurewebsites.net/api/padaria" method="put">
                <input type="hidden" name="id" is="core-input" value="{{prod.id}}">
                <paper-input name="nome" label="Nome" value="{{prod.nome}}" floatinglabel></paper-input>
                <paper-input name="Preco" label="Preço" value="{{prod.Preco}}" floatinglabel>></paper-input>
                <button type="submit">SALVAR</button>
            </form>
        </template>
    </template>
</body>

如何将事件侦听器添加到“.myForm”？我需要在 ajax-form '提交'后调用 core-ajax go() 方法。

我的问题是 querySelectorAll('.myForm') 结果为 null，所以它似乎还没有在 DOM 中。

我尝试将 querySelector 放入其中（但没有成功）：

app.addEventListener('template-bound', function() {});

这是一个 Polymer 应用程序。

更新 1

我得到了嵌套模板，给它一个“template2”的 id 并且：

var app = document.querySelector('#app');
app.addEventListener('template-bound', function() 
    var template2 = app.$.template2;
    <== question now is: how to "for each" the forms inside template2 to add an Event Listener?
});

【问题讨论】：

标签： polymer

【解决方案1】：

您是否尝试过仅添加声明性事件处理程序（on-event 属性）？ ajax-form 有 submitting 和 submitted 事件，所以大概你可以这样做：

<form class="myForm" is="ajax-form" on-submitting="myHandler" action="http://testesapi.azurewebsites.net/api/padaria" method="put">

【讨论】：

【解决方案2】：

querySelectorAll('.myForm')[0] 指定了该类型的第一个元素。

目前，如果您只有 1 个表单，则可以使用 getElementById() 来获得性能（微小的收益）。

编辑：

这是一个使用 querySelector 和 querySelectorAll 的粗略示例。

var form = document.querySelectorAll('.myForm')[0].style.backgroundColor = 'red';

var form = document.querySelector('.myForm2').style.backgroundColor = 'green';

对于创建的元素 querySelectorAll 没有用，因为它只返回一个静态列表。您可以创建一个元素并使用 ID 通过示例获取该元素，因为它返回实际的节点列表。

var section = document.getElementById('section');
section.children[3];

https://jsfiddle.net/kroq55td/1/

【讨论】：

我的问题是 myForm 为空（换句话说，长度 = 0）。我忘了说它是一个 Polymer 应用程序。
...我需要为所有表单添加一个事件监听器，而不仅仅是第一个