title: button onclick function firing twice
body: <p>I have a button that calls a javascript function using an event handler. For some reason, the event handler is being called twice.</p>
  
  <p>Here is my button (I am using a php object to generate the code, that's why there are a lot of empty tags):</p>
  
  <pre><code>&lt;button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true" width="" height="" placeholder="" data-mini="1" onkeypress="" &gt;Add To Cart&lt;/button&gt;
  </code></pre>
  
  <p>Here is my event handler:</p>
  
  <pre><code>$('.addToCartButton').click(function() {
      alert("bob");
      //addToCart($(this).attr("id"));
  });
  </code></pre>
  
  <p>Here, I am getting the alert twice.</p>
  
  <p>I have tried calling the function addToCart in the button's onclick property, but if I try it that way, I get this error:</p>
  
  <pre><code>TypeError: '[object HTMLButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')
  </code></pre>
  
  <p>I have also tried event.preventDefault() and event.stopPropagation(), and neither worked.</p>
  
  <p>Any ideas why this is happening, or what I can do to stop it from executing twice, or maybe why I am getting an error if I call the javascript function from onclick=""? </p>