阿賈克斯第二次不工作

Question

我正在使用搜索結果的排序功能。搜索後如果我更改下拉菜單中的值以進行篩選否。的每頁結果，它工作正常，第一次爲進一步下拉值更改Ajax功能不起作用。

這裏是我的代碼：

<select name="perpage" id="perpage" class="form-control select"> 
    <option value="2" <?php echo set_select('perpage','2',(!empty($data) && $data == "2" ? TRUE : FALSE)); ?>>2</option> 
    <option value="3" <?php echo set_select('perpage','3',(!empty($data) && $data == "3" ? TRUE : FALSE)); ?>>3</option> 
    <option value="4" <?php echo set_select('perpage','4',(!empty($data) && $data == "4" ? TRUE : FALSE)); ?>>4</option> 
</select> 

阿賈克斯：

<script type="text/javascript"> 
     $(document).ready(function(){ 
       $("#perpage").change(function(){ 
        $.ajax({ 
         method: "POST", 
         url: "<?php echo base_url(); ?>search", 
         data: { perpage:$("#perpage").val() }, 
         success: function(msg) { 
          $("body").html(msg); } 
        }) 
       }); 
     }); 
</script> 

VIEW：

<div class="intro-header7"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-lg-10" id="postList"> 
     <?php echo $this->ajax_pagination->create_links(); ?> 
      <?php if(isset($freelancers)) { foreach($freelancers as $row) { ?> 
      <div class="block-text2 highlight" id="sorted"> 
       <a href="<?php echo base_url('profile/index').'/'.$row['registration']; ?>"> 
        <div class="col-lg-3"> 
         <?php if($row['profile_img'] == ''){ 
         if($row['gender'] == 'Male') {?> 
         <img src="<?php echo base_url('assets/img/').'boy.svg'; ?>" class="img-circle centered prslider2" alt="" /> 
         <?php }else{?> 
          <img src="<?php echo base_url('assets/img/').'girl.svg'; ?>" class="img-circle centered prslider2" alt="" /> 
          <?php } }else{ ?> 
          <img src="<?php echo base_url('assets/profilepic/').$row['profile_img']; ?>" class="img-circle centered prslider2" alt="" /> 
          <?php } ?> 
         <div class="mark2 centered"> 
          <span class="ratname"><?php if(isset($row['rating'])){ echo substr($row['rating'],0,3);} ?></span> &ensp; 
            <?php if(round($row['rating']) == 5){ ?> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
            <?php }elseif(round($row['rating']) == 4){ ?> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-no-review"></span> 
            <?php }elseif(round($row['rating']) == 3){ ?> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
            <?php }elseif(round($row['rating']) == 2){ ?> 
             <span class="icon-review"></span> 
             <span class="icon-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
            <?php }elseif(round($row['rating']) == 1){ ?> 
             <span class="icon-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
            <?php }else{ ?> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
             <span class="icon-no-review"></span> 
            <?php } ?> 
          <p class="color3"><?php echo $row['review_count']; ?> Reviews</p> 
         </div> 
        </div> 
        <div class="col-lg-9"> 
         <a href="<?php echo base_url('profile').'/'.$row['registration']; ?>" class="onerow"><h4 class="control-label mozcss"><?php echo $row['fullname'] ?></h4></a> 
         <p><?php echo character_limiter($row['bio'],10); ?><a href="<?php echo base_url('profile').'/'.$row['registration']; ?>" class="readmore">Readmore</a></p> 
         <?php $skills = array(); 
           $skills = explode(',', $row['skills']); 
           foreach($skills as $s){ 
           echo '<div class="skills">'.$s.'</div>'; }?> 
        </div> 
       </a> 
      </div> 
      <?php } } ?> 
     </div> 
    </div> 
</div> 

所以有人請幫我解決這個問題。在此先感謝:)

Answer 1

您正在更換整個body內容，其中還包括select標籤。由於您正在重新創建元素，因此更改事件不會綁定到新生成的下拉列表中。要解決該問題，請在創建後使用事件委託或將事件綁定到新元素，或僅更新內容部分。

隨着event delegation：

$(document).ready(function(){ 
     $('body').on('change', "#perpage", function(){ 
     // ------^^^^^^^^^^^^^^^^^^^ 
      $.ajax({ 
       method: "POST", 
       url: "<?php echo base_url(); ?>search", 
       data: { perpage:$("#perpage").val() }, 
       success: function(msg) { 
        $("body").html(msg); } 
      }) 
     }); 
});