title: jQuery .click not working on dynamically loaded button
body: <p>I'm a little stuck here. I have a dynamically loaded list, and it has a button in it. I have jQuery setup to handle the .click on it but nothing is happening. Here is some sample code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="cart"&gt;                 
  &lt;!-- Lots of products loaded here dynamically --&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>jQuery/Javascript:</p>
  
  <pre><code>$(document).ready(function()
  
      $.ajax({
      url: 'showcart',
      type: 'GET',
      dataType: 'JSON',
      success: function(products){
        $.each(products, function(i, product){
  
          var FORM = '&lt;form action="#" method="POST" id="removeFromCart"&gt;&lt;input type="hidden" name="id" value="'+ product.id +'"&gt;&lt;button class="remove" type="button"&gt;x&lt;/button&gt;&lt;/form&gt;';
  
          $('#cart').append('&lt;li&gt;'+product.name+' : '+product.qty+'&lt;/li&gt;');
          $('#cart').append(FORM);
        })
      },
      error: function(){
        console.log('FAILURE LOADING PRODUCTS');
      }
    })
  
    $('#productForm').submit(function(event){
      event.preventDefault();
      $.ajax({
        type: 'POST',
        url: 'addproduct',
        data: $(this).serialize(),
        success: function(addedProduct){
          // var product = addedProduct.product;
          var productName = addedProduct.product.name;
          var productQty = addedProduct.qty;
  
          var FORM = '&lt;form action="#" method="POST" id="removeFromCart"&gt;&lt;input type="hidden" name="id" value="'+ addedProduct.product.id +'"&gt;&lt;button class="remove" type="button"&gt;x&lt;/button&gt;&lt;/form&gt;';
  
          console.log('Name:'+productName+' '+'Qty:'+productQty);
          $('#cart').append('&lt;li&gt;'+productName+' : '+productQty+'&lt;/li&gt;');
          $('#cart').append(FORM);
  
            $('#cart').empty();
            $.ajax({
            url: 'showcart',
            type: 'GET',
            dataType: 'JSON',
            success: function(products){
              $.each(products, function(i, product){
  
                var FORM = '&lt;form action="#" method="POST" id="removeFromCart"&gt;&lt;input type="hidden" name="id" value="'+ product.id +'"&gt;&lt;button class="remove" type="button"&gt;x&lt;/button&gt;&lt;/form&gt;';
  
  
                $('#cart').append('&lt;li&gt;'+product.name+' : '+product.qty+'&lt;/li&gt;');
                $('#cart').append(FORM);
              })
            },
            error: function(){
              console.log('FAILURE LOADING PRODUCTS');
            }
          })
        },
        error: function(){
          console.log('Failed to add or update product')
        }
      })
  
    })
  
    $(".remove").click(function(){
      // event.preventDefault();
      // var id = $(this).siblings("input[name='id']").val();
      console.log('id');
      // $.ajax({
      //   type: 'POST',
      //   url: 'removeproduct',
      //   data: $(this).serialize(),
      //   success: function(removedProduct){
      //     // var product = addedProduct.product;
      //     var productName = addedProduct.product.name;
      //     var productId = addedProduct.product.id;
      //     var productQty = addedProduct.qty;
      //   },
      //   error: function(){
      //     console.log('Failed to remove product')
      //   }
      // })
      // return false;
    })
  })
  </code></pre>