我正在使用搜索结果的排序功能。搜索后如果我在下拉列表中更改值,则过滤否。每页的结果,它第一次工作正常,并进一步下拉值更改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>
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>
查看:
<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>  
<?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>
所以请有人帮我解决这个问题。在此先感谢:)
答案 0 :(得分:2)
您正在替换包含body
标记的整个select
内容。由于您正在重新创建元素,因此更改事件不会绑定到新生成的下拉列表。要解决此问题,请在创建后使用事件委托或将事件绑定到新元素,或者仅更新内容部分。
$(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); }
})
});
});