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.
我正在处理搜索结果的排序功能。在搜索后，如果我在下拉菜单中更改值，则选择“否”。每一页的结果，它第一次运行良好，并且进一步的下拉值改变Ajax功能不起作用。
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:
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>  
<?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 :)
所以有人请帮我解决这个问题。提前谢谢:)
1 个解决方案
#1
2
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.
您正在替换包含select标记的整个正文内容。因为您正在重新创建元素，所以更改事件不会绑定到新生成的下拉菜单。要解决这个问题，可以在创建后使用事件委托或将事件绑定到新元素，或者只更新内容部分。
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); }
})
});
});
#1
2
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.
您正在替换包含select标记的整个正文内容。因为您正在重新创建元素，所以更改事件不会绑定到新生成的下拉菜单。要解决这个问题，可以在创建后使用事件委托或将事件绑定到新元素，或者只更新内容部分。
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); }
})
});
});