如何在html模板中绑定事件?

请参考我之前的问题: How to get element in template html? .

首先,我遵循 如何在模板html中获取元素? 获取元素。

var template = templateContent.content;

然后我试着绑一个 click 事件为 searchBtn :

searchBtn.addEventListener('click', function() {
    console.log('click'); // does not work
});

此绑定失败,因此我使用事件委派处理事件:

document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'searchBtn'){
        console.log('click');
        console.log(template.querySelector('#results'));
        template.querySelector('#results').innerText = 'Foo';
    }
 });

这两个日志是预期的,但是更新 innerText 不起作用。另一方面,我可以在click事件之外更新它的内容。有什么解决办法吗?

我的代码的最终版本:

var link = document.querySelector('link[rel="import"][href="search.html"]');
var templateContent = link.import.querySelector('template');
var template = templateContent.content;
var searchBtn = template.querySelector('#searchBtn'); 
console.log(searchBtn); 
template.querySelector('#results').innerText = 'Bar'; // ok

document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'searchBtn'){
        console.log('click'); // ok
        console.log(template.querySelector('#results')); // ok
        template.querySelector('#results').innerText = 'Foo'; // does not work
    }
 });

更新

现在我找回了 results 函数之外的元素:

var results = template.querySelector('#results');

然后在函数内部, results.innerText = 'Foo'; 作品。但是,这只会更新 结果 而用户界面则不会相应地更新。

如何更新模板内的ui?