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

问题: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(‘,‘);

时间: 2024-10-10 12:20:28

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

jQuery绑定enter事件

有时我们写jQuery绑定按钮事件时,执行成功后却发现,习惯性地按下"Enter"键不能提交?是不是我们要重新将"绑定按钮事件"再写一遍成"绑定enter键盘事件"呢?No!No!No! 只需要将键盘事件绑定按钮即可,就是这样简单--,绑定按键后就会执行相应的"绑定按键事件"了.     $(function(){         $("#button").bind("click",fu

input标签的accept属性、JQuery绑定keyDown事件

一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file"> 但是这样的话,所有文件都会显示出来,这里以上传头像为例,一点击选择文件,所有跟图片无关的文件也会显示出来: 这时可以给input标签增加一个accept属性,让它只显示图片相关的文件: <input type="file" id="my_file"

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

针对jquery绑定click事件执行两次,layer弹出框,以及img的map属性应用。

前不久使用jQuery与layer实现一个弹出框,发现在绑定弹出框事件时,事件执行了两次,准确的说是方法同时注册了两次,不分先后执行了两遍,导致弹出框弹出两次.请教同事后,发现原因有可能是jQuery的js与layer的js冲突(具体原因还需要深入了解),通过网络和请教同事,得到了三种处理方法. 方法一:不采用jQuery进行事件的绑定,直接在标签中添加onclick事件. 方法二:采用这种方式$("#item_add_button")[0].onclick = function(){

学习vue结合ajax查询出后台数据

第一步:先获取后台的API 这里已经写好了后台,API是bookAction_getAllBook 第二步:创建jsp文件并导入vue.js和JQuery.js 第三步:写上Model 第四步:写上View 这时页面上的显示的数据都是写死的,这时候就需要写上ajax通过它来获取到后台的数据并把它显示出来 第五步:ajax 先把model定义成一个带有bookList的空数组以便于存放后台获取的json数据 这时候要注意,这里有两个方法,我推荐使用的是方法二,因为方法一有一个不好的地方就是在页面成

Ajax -02 -JQuery+Servlet -实现页面点击刷出表格数据

demo功能分析 jquery 的js文件需要导入,json的三个文件需要导入,不然writeValueAsString 会转化成JsonArray(json 数组)失败 $("#mytbody").html(result);相当innerHTML先清空后添加 ,并且注意对应下面的id,需要加 "#" ! 在servelt中  resp.setContentType("application/json;charset=utf-8"); //设置j

Jquery 绑定标签事件

$('#foreachResult').delegate('td', 'click', function () {            alert($(this).text());        });

JQuery 绑定回车事件 兼容ie8,ie9

$("#form-search").find('#search-query').bind('keypress', function(e) { var keycode; if(window.event){ keycode = e.keyCode; //IE } else if(e.which){ keycode = e.which; } if (keycode != 13) { return; } that.search(); e.stopPropagation(); return fa

jQuery查看dom元素上绑定的事件列表

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧. 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上.这个好办: 审查绑定事件的元素(对着它右键->审查元素) 在弹出的Elements视图的控制台,右侧点击“Event Listeners”页签 然后