我在使用我的 polymer paper 按钮时遇到了问题，我在 JavaScript 代码中创建了该按钮并分配给 HTML 中的 div。我已经用谷歌搜索了一段时间，但空手而归。我只是希望能够在单击时执行某些操作，但我不知道如何为其单击属性分配一个函数。
提前致谢。
(function(document) {
'use strict';
var app = document.querySelector('#app');
window.addEventListener('WebComponentsReady', function() {
var mainCollapse = document.getElementById('collapse');
/*--------------Contact Details Collapseable--------------*/
var contactDetailsDiv = document.getElementById('contactDetails');
var gitBtn = document.createElement('paper-button');
gitBtn.textContent = 'GitHub Profile.';
gitBtn.raised = true;
gitBtn.id = 'gitButton';
gitBtn.link = 'https://github.com/SKHolmes';
gitBtn.onClick = function(){
console.log('here'); }
var githubDiv = document.getElementById('githubDiv');
githubDiv.appendChild(gitBtn);
app.displayContactDetails = function(){
var contactDetails = contactDetailsDiv.innerHTML;
mainCollapse.innerHTML = contactDetails;
}
//Button Listeners
document.getElementById("contact-button").addEventListener("click", function(){
app.displayContactDetails();
mainCollapse.toggle();
});
document.getElementById('gitButton').addEventListener('click', function(){
console.log('here');
});
});
})(document);
好吧，现在有点荒谬了，我已经尝试了几乎所有方法来让这个按钮向控制台打印一些内容。包括所有这些。
app.listen(gitBtn, 'tap', 'test');
app.listen(gitBtn, 'click', 'test');
gitBtn.addEventListener('tap', function(){
alert('here');
});
gitBtn.onclick = 'test';
gitBtn.click = function(){ console.log('here'); }
app.test = function(){
console.log('here');
}
gitBtn.setAttribute('on-click', 'app.test');
最佳答案
polymer docs描述如何强制添加事件监听器:
Use automatic node finding and the convenience methods
listenandunlisten.this.listen(this.$.myButton, 'tap', 'onTap'); this.unlisten(this.$.myButton, 'tap', 'onTap');The listener callbacks are invoked with
thisset to the element instance.If you add a listener imperatively, you need to remove it imperatively. This is commonly done in the
attachedanddetachedcallbacks. If you use the listeners object or annotated event listeners, Polymer automatically adds and removes the event listeners.
因此，您可以像这样绑定(bind) onClick 函数:
gitBtn.attached = function() {
this.listen(this, 'tap', 'onClick');
};
gitBtn.detached = function() {
this.unlisten(this, 'tap', 'onClick');
};
(function(document) {
'use strict';
window.addEventListener('WebComponentsReady', function() {
var gitBtn = document.createElement('paper-button');
gitBtn.textContent = 'GitHub Profile.';
gitBtn.raised = true;
gitBtn.id = 'gitButton';
gitBtn.link = 'https://github.com/SKHolmes';
gitBtn.onClick = function() {
console.log('gitBtn.onClick()');
log.innerHTML += 'gitBtn.onClick()<br>';
};
gitBtn.attached = function() {
this.listen(this, 'tap', 'onClick');
};
gitBtn.detached = function() {
this.unlisten(this, 'tap', 'onClick');
};
var githubDiv = document.getElementById('githubDiv');
githubDiv.appendChild(gitBtn);
});
})(document);<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<div id="githubDiv"></div>
<div id="log"></div>
</body>
</html>关于javascript - 在 JavaScript 单击事件中创建的 polymer 纸按钮未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36418692/