JQuery中动态生成元素的绑定事件(坑死宝宝了)
2015-11-23 17:25
861 查看
今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家。
问题是这样的,首先看看我的界面,有一个初始印象:
下面是操作列所对应的JS代码:
.cshtml页面上最后生成的modal窗口生成的区域定义:
操作modal模态窗口的JS的最终脚本为:
这里,稍稍解释一下:看到动态生成“编辑”按钮的JS脚本中的a标签中的class有一个ajax-demo没有(我已用红色字体标出)?其实这个类没有任何样式,只是一个标识类。其次,在操作modal的脚本中,先获得模态窗口要显示的区域,然后将含有“ajax-demo”类的元素绑定到click事件。这里要讲的主要的坑爹问题是绑定事件的问题。
一开始是这么写的,没有获取到元素,因而没有执行绑定的click事件。
接下来,搜索问题,搜索到如下感觉比较靠谱的答案:
还是最后一个答案起了作用,首先,给了我一个不一样的写法的提示;其次,on,live以及bind都试过了,只有live没有绑定到click事件,bind虽然也绑定到click事件了,但是半天加载不出异步请求的数据,只有on让人满意。
第一个是使用on绑定click事件的效果,第二个是bind绑定click事件的效果,bind最终是没有加载出ajax内容。
问题是这样的,首先看看我的界面,有一个初始印象:
下面是操作列所对应的JS代码:
{ "data": function (datas) { return "<a data-url='/Device/Edit?id=" + datas.Id + "' data-toggle='modal' class='btn btn-sm btn-default btn-circle btn-editable ajax-demo'><i class='fa fa-pencil'></i> 编辑</a>" +
"<a href='?p=ecommerce_products_edit' class='btn btn-sm btn-default btn-circle btn-editable purple'><i class='fa fa-times'></i> 删除</a>"; }
.cshtml页面上最后生成的modal窗口生成的区域定义:
<!-- ajax --> <div id="ajax-modal" class="modal fade" tabindex="-1"> </div>
操作modal模态窗口的JS的最终脚本为:
//ajax demo: var $modal = $('#ajax-modal'); $(document).on('click', '.ajax-demo', function () {
// create the backdrop and wait for next modal to be triggered $('body').modalmanager('loading'); var el = $(this); setTimeout(function(){ $modal.load(el.attr('data-url'), '', function(){ $modal.modal(); }); }, 1000); });
这里,稍稍解释一下:看到动态生成“编辑”按钮的JS脚本中的a标签中的class有一个ajax-demo没有(我已用红色字体标出)?其实这个类没有任何样式,只是一个标识类。其次,在操作modal的脚本中,先获得模态窗口要显示的区域,然后将含有“ajax-demo”类的元素绑定到click事件。这里要讲的主要的坑爹问题是绑定事件的问题。
一开始是这么写的,没有获取到元素,因而没有执行绑定的click事件。
$('.ajax-demo').on('click', function() {......});
接下来,搜索问题,搜索到如下感觉比较靠谱的答案:
还是最后一个答案起了作用,首先,给了我一个不一样的写法的提示;其次,on,live以及bind都试过了,只有live没有绑定到click事件,bind虽然也绑定到click事件了,但是半天加载不出异步请求的数据,只有on让人满意。
第一个是使用on绑定click事件的效果,第二个是bind绑定click事件的效果,bind最终是没有加载出ajax内容。
相关文章推荐
- 实现jQuery扩展总结
- jQuery Raty 源码改造,设置自己想要的值
- jquery导入到eclipse报missing semicolon错误
- JQuery EasyUI Combobox的onChange事件
- jQuery实现Tab选项卡切换效果简单演示
- Jquery 提示
- jquery 清除style样式
- jquery ajax验证用户名是否存在(后台spring mvc)
- web前端_jquery的cookie插件的使用
- 基于jQuery实现简单的折叠菜单效果
- JQuery按照form上传文件+asp.net后台处理(二)
- jquery无限级联下拉菜单简单实例演示
- jquery实现图片放大镜功能
- jquery自定义表格样式
- 使用jquery获取table选中行的其他列的值
- jquery实现表单验证简单实例演示
- jquery easyui datagrid使用参考
- 自己编写jQuery插件
- JQuery——可以编辑的表格
- Jquery网页选项卡