单击jquery时该按钮不执行任何操作

Question

我正在学习jquery,我遇到了问题.

这是代码

$(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');
  });

});

我从ajax调用获得的响应是​​一个具有类productsButton的按钮. 现在,当我尝试单击该按钮时,我通过ajax然后它不会提示是.我的意思是它什么也没做.问题: - 可能是什么问题？

Answer 1

尝试使用.on()生成按钮的事件委托,因为它们是动态生成的

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

#printTheProducts最近的父元素在哪里,您可以使用document或document.body作为选择器使用!

句法:

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