JQuery не работает после того, как содержимое загружается через Ajax

Question

У меня есть страница, на которой нужно нажать кнопку checkboxe, и нужно ввести значение скидки. это значение переходит на другую страницу php через ajax-вызов на discount_table, где идентификатор и значение скидки вставляются в базу данных, а новый контент спрятан на одну и ту же страницу в названном «контенте». после этого, если я снова выберу флажок и отправлю данные через ajax, функция щелчка не будет работать. Может кто-нибудь скажет мне, где мой код идет не так!

<script> 
    $(document).ready(function() { 
    $('#click').on("click",function(){ 
     var arrCheckboxes = document.myform1.elements["dataString[]"]; 
     var checkCount = 0; 
     for (var i = 0; i < arrCheckboxes.length; i++) { 
     checkCount += (arrCheckboxes[i].checked) ? 1 : 0; 
     } 
     if(notEmpty(document.getElementById('discount_value'), 'Please Enter a Value')==true) 
     { 
     if (checkCount > 0) 
     { 
      var ans= confirm("Are you sure to want to add Discounted Value for the selected checkboxes?"); 
      if(ans) 
      { 
       //alert(confirm); 
       favfunct(); 
      } 
      else 
      { 
       return false; 
      } 
     } 
     else 
     { 
      alert("You Have not selected any Checkbox!!"); 
      return false; 
     } 
     } 
    }); 
    }); 

    function favfunct() 
    { 

    var dataString= $('#myform1 input[type=checkbox]:checked').serializeArray(); 
    var arr = Array(); 
    var j=0; 
    for(i=0;i<dataString.length;i++) 
    { 
     arr[j++]= dataString[i].value; 
    } 
    var discount = document.getElementById('discount_value').value; 
    typeName = jQuery("select[name='cust_type']").val(); 
    jQuery.ajax({ 
      type: "POST", 
      url: "discount_table.php", 
      data:"&discount="+discount+"&typeName="+typeName+"&dataString="+arr, 
      success: function(response){ 
      $('.content').html(response); 
      } 
     }); 
    } 
    </script> 

This is my script in head section. 
I am new to php So please avoid if any mistakes. 
Here is my html code: 
    <div class="content"> 
    <form action="#" method="post" enctype="multipart/form-data" style="width:990px;" id="myform1" name="myform1"> 
    <h2 style="font-style: italic;float: left;color:#8B3A3A;font-size: 30;font-weight: bold; position: relative; left: -40px;">Discount to be Added</h2><br /><br /> 
    <?php echo '<div><table style="position:relative;right:-75px; "cellpadding="10"cellspacing="10">'; 
    echo "<th style='padding-right:45px;padding-bottom:10px;color:#8B3A3A;'>Sr.No</th><th style='color:#8B3A3A;padding-right:45px;padding-bottom:10px;'> Category Name</th><th style='color:#8B3A3A;padding-right:45px;padding-bottom:10px;'> Sub Category Name</th>"; 

      $i=0; 
      while(@$up = mysql_fetch_array($result)) 
      { 

       echo "<tr> 
         <td> ";?> 
         <input id="CheckBoxID[]" type="checkbox" class="ids" name="dataString[]" value="<?php if($up['CatID']=="--"){echo $up['SubCatID'].',1';}else{echo $up['CatID'].',0';};?>"/> 
      </td> 
         <td style='padding-right:30px'> 
           <input name="catname[]" type="text" id="name" value="<?php echo $up['CatNm'];?>" readonly=""style="border: none;"/> 
      </td> 
         <td style='padding-right:30px'> 
           <input name="subcatname[]" type="text" id="name" value="<?php echo $up['SubCatNm'];?>"readonly="" style="border: none;"/> 
         </td> 
      <?php $i++; } 
       echo "</table></div>";}?><br /> 
       <div style="position: relative;left:100px;"> <label for="discount">Enter the Discounted value:</label> 
       <input type="text" id="discount_value" name="discount_value" required="required"/><br /><br /> 
     <input type="button" value="Add Discount" name="add_discount" onclick="" id="click" style="width:100px;text-align:center;padding: 3px;"/></div> 
     </form> 
     <?php  
       $result1=mysql_query("Select c.CatNm,'--' AS SubCatNm,Discount_PER from discount d,category c where CustTypeID=$typeID and d.CatID=c.CatID and d.SubCatID is NULL UNION Select c.CatNm,s.SubCatNm,Discount_PER from discount d,subcategory s,category c where CustTypeID=$typeID and d.SubCatID=s.SubCatID and s.CatID=c.CatID"); 
     $cnt1=1; 
     $rows1=mysql_num_rows($result1); 
     if($rows1>0) 
     {?> 
     <div> 
     <form action="#" method="post" enctype="multipart/form-data" style="width:990px;"> 
      <h2 style="font-style: italic;float: left;color:#8B3A3A;font-size: 30;font-weight: bold; position: relative; left: -40px;">Category/SubCategory With Discount</h2><br /><br /> 
     <?php echo '<div style=""><table style="position:relative;right:-75px; "cellpadding="10"cellspacing="10">'; 
     echo "<th style='padding-right:45px;padding-bottom:10px;color:#8B3A3A;'>Sr.No</th><th style='color:#8B3A3A;padding-right:45px;padding-bottom:10px;'> Category Name</th><th style='color:#8B3A3A;padding-right:45px;padding-bottom:10px;'> Sub Category Name</th><th style='color:#8B3A3A;padding-right:45px;padding-bottom:10px;'>Discount</th>"; 
     while(@$up = mysql_fetch_array($result1)) 
     { 
       //$pid=$up['SubCatID']; 
       echo "<tr> 
      <td> 
      ".$cnt1." 
      </td> 
         <td style='padding-right:30px'> 
      ".$up['CatNm']." 
      </td>"; 

           echo "<td style='padding-right:30px'> 
           ".$up['SubCatNm']." 
           </td>";  



      echo "<td style='padding-right:20px; padding-bottom:10px;'> 
           ".$up['Discount_PER']." 
          </td> 
        </tr>"; 
        $cnt1++; 
      } 
     echo "</table></div>";}?> 
     </div> 
     </div> 

Answer 1

Необходимо присоединить обработчики событий к динамически добавленным элементам. Используя метод jQuery, метод .on() присоединяет обработчики событий к выбранному в данный момент набору элементов в объекте jQuery. Начиная с jQuery1.7, метод .on() предоставляет все функции, необходимые для прикрепления обработчиков событий.

С вашего скрипта видно, что вы используете метод .on(). Так вот мое предложение

Сразу после удаления $(document).ready() и положить $('#click').on("click",function(){}) коды внутри следующей функции

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

}); 

Так должно выглядеть следующим образом:

$(document).on('click','#click',function(){ 
    var arrCheckboxes = document.myform1.elements["dataString[]"]; 
    var checkCount = 0; 
    for (var i = 0; i < arrCheckboxes.length; i++) { 
     checkCount += (arrCheckboxes[i].checked) ? 1 : 0; 
    } 

    if(notEmpty(document.getElementById('discount_value'), 'Please Enter a Value')==true) { 
     if (checkCount > 0) { 
      var ans= confirm("Are you sure to want to add Discounted Value for the selected checkboxes?"); 
      if(ans) { 
       //alert(confirm); 
       favfunct(); 
      } else { 
       return false; 
      } 
     } else { 
      alert("You Have not selected any Checkbox!!"); 
      return false; 
     } 
    } 
});