Ajax第二次无法正常工作

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>  

查看：

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