JQuery中动态生成元素的绑定事件

简介:

今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家。

问题是这样的,首先看看我的界面,有一个初始印象:

image

下面是操作列所对应的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() {......});

接下来,搜索问题,搜索到如下感觉比较靠谱的答案:

image

image

image

image

image

image

还是最后一个答案起了作用,首先,给了我一个不一样的写法的提示;其次,on,live以及bind都试过了,只有live没有绑定到click事件,bind虽然也绑定到click事件了,但是半天加载不出异步请求的数据,只有on让人满意。

imageimage

第一个是使用on绑定click事件的效果,第二个是bind绑定click事件的效果,bind最终是没有加载出ajax内容。





本文转自tkbSimplest博客园博客,原文链接:http://www.cnblogs.com/farb/p/4989046.html,如需转载请自行联系原作者


目录
相关文章
|
2月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
20 0
|
1月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
10 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
1月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
16 0
|
1月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
20 0
|
2月前
|
JavaScript 前端开发
jQuery 第八章(jQuery操作dom元素)
jQuery 第八章(jQuery操作dom元素)
49 0
|
2月前
|
JavaScript 前端开发
jQquery 第七章(jQuery操作dom元素)
jQquery 第七章(jQuery操作dom元素)
32 0
|
2月前
|
JavaScript 容器
【jQuery学习】—jQuery操作元素位置
【jQuery学习】—jQuery操作元素位置
|
3月前
|
JavaScript
jQuery动态生成input填写时间值并且提交给后端
jQuery动态生成input填写时间值并且提交给后端
15 0
|
3月前
|
JavaScript
jQuery动态增加一行元素和删除一行元素
jQuery动态增加一行元素和删除一行元素
14 0

相关产品

  • 云迁移中心
  • 相关课程

    更多