jQuery Ajax发布仅工作一次

Question

I have a jquery script that posts a value:

// //Delete a product from the shopping cart
tpj('.remove').on('click', function() {
  // Stop form from submitting normally
  event.preventDefault();
  // Get some values from elements on the page:
  console.log('test');
  var $remove = tpj(this).attr('id');
  url = 'includes/shoppingcart.php';
  // Send the data using post
  var posting = tpj.post( url, { remove: $remove} );
  // Put the results in a div
  posting.done(function( data ) {
    var content = tpj( data );
    tpj( "#result" ).empty().append( content );
  });
});

This works the first time, but when I click a second time I redirect to my homepage, which makes sense since the anchor tag the .remove class is in has nothing in its href. However this means the preventdefault() is not working, the entire on click is not working.

Why is that? I googled and found out I should use .on instead of .click but this didn't change anything for me.

The following html line (which fires the jquery):

 <a href="" class="remove" id="'.$cartproduct['product'].'" title="Verwijder product">×</a>

is in my header.php and shoppingcart.php , when the ajax post is made and the result of shoppingcart.php is loaded in my shopping cart, the link stops working like it should.

What do I need to do?

Answer 1

function(EVENT) foggoten in

  tpj('.remove').on('click', function() { //... } must be: tpj('.remove').on('click', function(event) { //... }