Question

在以下代码中：

<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>

如何将事件监听器添加到＆＃34; .myForm＆＃34;？在ajax-form被提交后，我需要调用core-ajax go（）方法。

我的问题是querySelectorAll（＆＃39; .myForm＆＃39;）结果为null，所以它似乎还没有在DOM中。

我试图把querySelector放在这里（但没有成功）：

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

它是一个聚合物应用程序。

更新1

我得到了嵌套模板，它的ID为＆＃34; template2＆＃34;和

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?
});

Answer 1

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

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

Answer 2

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

目前对于perfrormance（微小收益），如果你只有1个表格，你可以使用getElementById（）。

编辑：

这是使用querySelector＆amp;的一个粗略示例。 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/

如何在嵌套模板中添加addEventListener？

2 个答案: