JQuery中动态生成元素的绑定事件(坑死宝宝了)

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

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

下面是操作列所对应的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内容。

时间: 2024-10-27 16:38:25

JQuery中动态生成元素的绑定事件(坑死宝宝了)的相关文章

关于jQuery中动态生成的点击事件触发两次的讨论

由于是动态生成的  点击事件运用了jQuery里面的on()方法,绑定在body上面,结果在程序里面运行了两次.参考了博客 利用on和off方法编写高效的js代码知道了很多在dom对象删除以后,其声明的绑定在window上的事件还一直存在,导致相同的功能代码执行了几次.故使用之前要清理掉body上绑定的click事件,利用了jQuery里面off()方法. $('body').off('click').on('click','selector',function(){});

JQuery对于动态生成的标签绑定事件失效

JQuery对整个html文档进行dom操作后,我们要想动态绑定事件,有两种方法 1.在进行dom操作时,在标签中写上onclick="afun()" 2.利用document的操作,代码如下,优先推荐下边这种方式 $(document).on("click","#id",function(){ //事件的方法 }); 原文地址:https://www.cnblogs.com/Lyn4ever/p/11376151.html

Jquery给动态生成的对象绑定事件

$(document).on("blur", ".Text1", function () { var index = this.id.replace('txtStandard', '') var item = $("#items" + index).html(); //获取验收项目 var productType = $("#Select1").val(); //产品类别 var fid = $("#FID"

动态生成元素动作绑定,jquery 1.9如何实现

1.7后增加了 live()1.9后被移除了 网上说可以用 on() 代替 可以实际在动态生成元素上绑定动作,没效果,求解绝方法(用低版本的jQuery这种方法,求别说..) 答: 之前有老兄回答过类似这个问题,我把他的写法给你贴一下吧: 你应该使用 on 事件进行绑定,这样新插入的元素就可以触发点击事件了.http://api.jquery.com/on/ $(function(){ $("body").on("click", '.a', function(){

jquery访问动态生成元素

最近在做留言板过程中 ,遇到一个问题:通过jq动态生成的元素无法绑定事件,上网 查资料得知,动态生成元素需要通过事件代理来实现 这里直接介绍我采用的on()方式实现 : jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],f

jQuery中多个元素的Hover事件

1.需求简介 2.示例研究 3.解决方案 1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求. 不过,有些时候我们希望当鼠标进入两个或多个元素“组合的区域”时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件.例如两个元素紧挨着的HTML元素,如下图: 当鼠标进入二者的“组合区”域

DOM中动态创建元素与jQuery中动态创建元素

DOM中动态创建元素与jQuery中动态创建元素 DOM中动态创建元素: 1. document.write("标签的代码")    缺点:页面中原有的元素会被覆盖掉 2. innerHTML 3. document.createElement("标签的名称") jQuery中动态创建元素: 1. $("标签的代码") 2. 对象.html("标签的代码") 原文地址:https://www.cnblogs.com/david

jquery动态生成html代码绑定事件

今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老,于是结合网上加上自己的测试,找到了一种解决方法. 我使用的jquery是1.9.11,jquery1.7之后就将live方法废弃了,新增了on和off方法,我的解决办法就是使用on方法,首先看代码: <div class="h3"> <h3>李健1</h3&

jQuery向动态生成的内容添加事件响应

jQuery live() 方法是给所有匹配的元素附加一个事件处理函数,即使这个元素是以后通过append,prepend,after等事件生成后的内容也依然有效. 这个方法可以看做是 .bind() 方法的一个变体.使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为此需要再使用一次 .bind() 才行.比如说: 1 <body> <div class="clickme">Click here</div>