JQuery中动态生成元素的绑定事件-优快云博客

本文记录并解决了前端开发中动态生成的按钮未能正确绑定点击事件的问题，通过对比bind、live及on方法的区别，最终成功实现异步数据加载。

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

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

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

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