Ajax not working for second time

Question

I'm working with sorting function on search results. After the search If I change value in the dropdown for filtering no. of results per page, It's working fine for first time and for further dropdown value change Ajax function is not working.

Here is my code:

<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>  

Ajax:

<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>

So someone please hep me to solve this issue. Thanks in advance :)

Answer 1

You are replacing entire body content which includes the select tag also. Since you are recreating element the change event won't get binded to the newly generated dropdown. To solve the problem either use event delegation or bind event to the new element after creation or only update the content portion.

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