title: How to bind an event to an element in a chrome extension popup window
body: <p>I've searched quite a bit, and none of the answers I've found have worked 100%.</p>
  
  <p>Basically, I want the popup to show a handful of buttons, then call the same function with different parameters. Concept:</p>
  
  <pre><code>&lt;button onclick="foo(1,2);"&gt;Button 1&lt;/button&gt;
  &lt;button onclick="foo(2,3);"&gt;Button 2&lt;/button&gt;
  </code></pre>
  
  <p>I've tried a few simple and direct methods, none of which work. If I take the code out of the function, and have popup.js contain the code, it works (my function is fine).</p>
  
  <p>I've tried:</p>
  
  <pre><code>$('#btn1').click(function(e) {
      alert('btn1');
  });
  </code></pre>
  
  <p>as well as</p>
  
  <pre><code>document.getElementById('btn1').addEventListener('click',doSomething(1,2));
  </code></pre>
  
  <p>Also, i've tried adding the button addEventListener inside of a <code>document.addEventListener('DOMContentLoaded', function() {....});</code></p>
  
  <p>The curious part is that if my popup.js contains button.addEventListener, the first one is fired upon clicking the browser action, and then nothing works. This happens regardless of whether the click event listner is inside of a DOMContentLoaded listener or not.</p>
  
  <p>I have a feeling this is a CSP issue, but I can't seem to get it to work.</p>
  
  <p>For those scanning for a question mark:
  From within a popup.html/popup.js, how can I call a single function with different parameters based on an onclick event?</p>