在jQuery中单击时按钮不起作用

Question

I am learning jquery and i am stuck with a problem.

Here is the code

$(function(){
  var gotProducts=new Array();
  var productsWithDelete=new Array();
  $('.addProducts').on('keyup',function(event) {
    var searchVal=$(this).val().trim();
    if(searchVal.length > 0) {
      $.ajax({
        url: 'http://localhost/url',
        data: { products: $(this).val(), },
        type: 'POST',
        dataType: 'html',
        success: function(msg) {
          $('#printTheProducts').html(msg);
        }
      });
    }
  });

  $('.productsButton').click(function() {
    alert('yes');
  });

});

The response I am getting from the ajax call is a button having class productsButton .

Now when i try to click that button I got through ajax then it does not alert yes . I mean it does nothing.

Question:-

What might be the problem?

Answer 1

Try event delegation using .on() for generated button, As they are generated dynamically

$('#printTheProducts').on('click','.productsButton',function(){
    alert('yes');
});

Where #printTheProducts is the closest parent element, you can use document or document.body also as a selector!

Syntax:

$(closestparentelement).on('event','targetselector',function(){
});