通過Ajax加載內容後，Jquery不起作用

Question

我有一個頁面，其中點擊按鈕的複選框必須被選中並且必須輸入折扣值。這個值通過ajax調用到另一個php頁面，並打到discount_table，其中Id和折扣值被插入到數據庫中，並且新內容被凍結到名爲「content」中的相同頁面中。之後，如果我再次選擇複選框並通過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; 
     } 
    } 
});