Ajaxが2回目で機能しない

Question

検索結果にソート機能を使用しています。検索後ドロップダウンで値を変更してもいいですか？ 1ページあたりの結果の数は、これは初めてのことであり、さらなるドロップダウン値の変更については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

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); } 
      }) 
     }); 
});