Событие Click не работает с загруженным содержимым Ajax

Question

Может ли кто-нибудь увидеть, что мне не хватает? Некоторое время я застрял на этом. У меня есть пост ajax, который динамически загружает products.content.php на мою страницу. Я хочу связать событие click с кнопкой, созданной с помощью этого сообщения, но я могу заставить его работать только тогда, когда данные не загружаются ajax.

  $.post('product.content.php',{'page': 0}, function(data) { 

      $("#products").append(data); //append data received from server 

     }).fail(function(xhr, ajaxOptions, thrownError) { 
      alert(thrownError); //alert any HTTP error 
     });   

работает хорошо, но потом, когда я хотел бы связать событие щелчка прилагаемых данных я получаю об ошибке «TypeError: thisSectionID не определен», даже после того, как я делегировал событие. (EDIT: изменен var thisSectionID в $(this).attr('id'); найти щелкнул вместо кнопок ID ближайшего Div ID)

 $(document).on('click', '.popup_open', function() { 

      var thisSectionID = $(this).closest('div').attr('id'); 
      var pidValSplitter = thisSectionID.split("_"); 
      var pidVal   = pidValSplitter[1]; 

      var productPopup  = $("#product_popup"); 

      productPopup.popup("show"); 
      productPopup.html('<i class="fa fa-circle-o-notch fa-spin"></i>'); 

      productPopup.load("product.popup.php", {'pid':pidVal}, 
       function (responseText, textStatus, req) { 
        if (textStatus == "error") { 

         productPopup.empty(); 
         productPopup.popup("hide"); 

        }else{ 
         productPopup.empty(); 
         productPopup.html(responseText); 

          $('form').on('submit', function (e) { 
           var action     = "voegtoe"; 

           var aantalVal    = $("#aantal_" + pidVal).val(); 

           var dataString = 'action='+ action + '&pid=' + pidVal + '&aantal=' + aantalVal; 

           var thisRow = $(this).closest('.row'); 
           thisRow.empty(); 
           thisRow.html('<i class="fa fa-circle-o-notch fa-spin"></i>'); 

           $.ajax({ 
            type: 'post', 
            url: 'functions.php', 
            data: dataString, 
            success: function (theResponse) { 

             productPopup.empty(); 
             productPopup.popup("hide"); 
             $("#cart_popup").popup("show"); 
             $(".cart").html(theResponse);   

            }, 
            error: function (jXHR, textStatus, errorThrown) { 
             alert(errorThrown); 
            } 
           }); 
           e.preventDefault(); 
          }); 

          $('.product-popup-close').click(function (e) { 
           e.preventDefault(); 
           productPopup.empty(); 
           productPopup.popup("hide"); 
          }); 

        } 
      }); 

     }); 

Answer 1

Чтобы связать событие на динамически созданный элемент использовать on() функцию:

$(document).on('click', '#new_element', function() { 
    // Your function here ... 
});