Ajax些许问题

1、AJAX加载了HTML但是HTML里面的CLICK事件无效？

       2016-8-24

事件委托，ajax载入新dom之前js就加载完了，事件当然没有绑定到新载入的dom上。 举个例子，如果ajax载入了一个

<span class="load"></span>

这个时候如果你的js中写了$('.load').on('click',function(){ do something...}); 事件是绑定不上去滴。 你需要$('body').on('click' , '.load' , function(){ do something ...}); 原理很简单，将事件委托到body（当然可以是其它父元素），等事件冒泡到父元素上面再进行事件处理。当然，如果你在body上绑定几百个事件，基本上页面就跪了。。。 so，还有一个方法，就是预判你要加载的dom，然后预先创建一个同样的元素。 例如：你可以先在页面中写一个

<span class="load load-hide">element</span>

然后将事件绑定到这个DOM上，ajax加载的时候只需要加载element 然后

$('.load').on('click' , function(){ do something ... });

.......

some code

.......

var $_load = $('.load'),

    $load  = $_load.clone(true),//true参数会将事件绑定克隆

    $ele   = $load.html(element);

$_load.after($ele);

当然，这种方法在一次性载入大量数据的情况下性能也非常堪忧。但是在零碎的不同类项的数据载入时比较方便。

2、AJAX传递参数

AJAX传递参数过长时，需要将参数转换成json类型进行传递，否则Tomact将报异常，当用ajax提交form表单时，包含上传文件，需调用

<script src="js/jquery.form.js"></script>js库，然后提交，否则后台获取不到上传文件：

eg：

var url="<%=request.getContextPath()%>/sendMail2/send.action";

     var option ={  

         url: url,   

         type: "post", 

         dataType: "json",

         //data : $( '#frm').serialize(),

          headers : {"ClientCallMode" : "ajax"},

         data :  {editor:editor},//大于2k，转换成json

         beforeSend:function(){$("#divload").show();},//发送数据之前

         complete:function(){$("#divload").hide();},//接收数据完毕

         success: success,

         error: function (msg) {

             alert("aa"+msg); 

         } 

       }; 

       $("#frm").ajaxSubmit(option);