码迷,mamicode.com
首页 > Web开发 > 详细

jquery绑定的事件对ajax刷新出的数据不生效,on可能受jquery版本影响

时间:2017-11-07 13:28:40      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:搜索   sub   数据   刷新   click   parent   需要   items   script   

问题:jquery绑定的事件对ajax刷新出的数据不生效

方法:可以用 jquery 里面的 on 和  delegate 预绑定父元素就可以触发的。

注意:某些限制下,个人用的是jquery 1.4.2版本,还不能更新到 1.7版本,on 绑定是报错的,用 delegate 可以的。

on对jquery 看网上资料是需要 1.7以后版本才支持,具体没试验。

 

案例:

搜索新数据,调用choic.php 将key传过去获取搜索内容返回到arcz里面。将 arcz 里面新刷新出来的选中的 复选框 一旦选中添加到 arcx里面去

(可以多次搜索添加,将最后arcx 里面的值统一调用就好)

 

搜索:<input type=‘input‘ name=‘key‘> <input type=‘submit‘ value=‘提交‘ id=‘xuan‘>

<ul id=‘arcz‘>

     <li><input name=‘checkarc‘ type=‘checkbox‘>111</li>

     <li><input name=‘checkarc‘ type=‘checkbox‘>222</li>

     <li><input name=‘checkarc‘ type=‘checkbox‘>333</li>

</ul>

<ul id=‘arcx‘>

</ul>

<script type="text/javascript">
$("#arcz").delegate("input","change",function(){
if($(this).is(‘:checked‘)){
    var v = $(this).val();
    var txt = $(this).parent(‘li‘).text();
    $("#arcx").append(‘<li><input type="checkbox" name="checkarc" value="‘+v+‘" checked="checked">‘+txt+‘</li>‘);
}
});
</script>

<script type="text/javascript">

$(‘#xuan‘).click(function(){
var key = $(‘input[name="key"]‘).val();
$.post(
  ‘choice.php‘,
  {‘key‘:key},
  function(msg){
    $("#arcz").empty();
    var x = eval(‘(‘+msg+‘)‘);
    $.each(x,function(i,m){
      $("#arcz").append(‘<li><input type="checkbox"  value="‘+m.id+‘">‘+m.title+‘</li>‘);
    })
  }
);
})

</script>

 

其他知识点:

1、$(this).is(‘:checked‘) 判断是选中事件,change包括选中和取消选中。

2、获取选中元素及过滤js 数组 重复元素(本文字下面)

 

最后获取 arcx 里面 str 值:

var arr = new Array();
$(‘#arcx input[name="checkarc"]‘).each(function(i){
if(this.checked==true){
arr.push($(this).val());
}
});
var new_arr=[];

//去jquery重复数组元素
for(var i=0;i<arr.length;i++){
  var items=arr[i];
  if($.inArray(items,new_arr)==-1){
    new_arr.push(items);
  }
}
var str = new_arr.join(‘,‘);

 

jquery绑定的事件对ajax刷新出的数据不生效,on可能受jquery版本影响

标签:搜索   sub   数据   刷新   click   parent   需要   items   script   

原文地址:http://www.cnblogs.com/lola/p/7798357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!