CODEWITHSUNDEEP
javascripthtmleventspolymerpaper-elements
SHolmes
SHolmes

Reputation: 198

Polymer Paper-Button created in JavaScript click event not firing

I'm having trouble with my polymer paper-button which I create in my JavaScript code and assign to a div in my HTML. I've been Googling for a while but am coming up empty handed. I simple want to be able to do something when it is clicked but i can't figure out how to assign it's click property a function.

Thanks in advance.

(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);

Okay it's getting a little ridiculous now I've tried nearly everything to get this button to print something to the console. Including all of these.

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');

Upvotes: 0

Views: 1252

Answers (1)

user600838
user600838

Reputation:

Polymer docs describe how to imperatively add event listeners:

Use automatic node finding and the convenience methods listen and unlisten.

this.listen(this.$.myButton, 'tap', 'onTap');

this.unlisten(this.$.myButton, 'tap', 'onTap');

The listener callbacks are invoked with this set to the element instance.

If you add a listener imperatively, you need to remove it imperatively. This is commonly done in the attached and detached callbacks. If you use the listeners object or annotated event listeners, Polymer automatically adds and removes the event listeners.

So, you would bind your onClick function like this:

gitBtn.attached = function() {
  this.listen(this, 'tap', 'onClick');
};
gitBtn.detached = function() {
  this.unlisten(this, 'tap', 'onClick');
};

jsbin

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

Upvotes: 1

Related Questions