这篇文章主要围绕ajax注册事件页面加载执行js事件和ajax实现注册展开，旨在为您提供一份详细的参考资料。我们将全面介绍ajax注册事件页面加载执行js事件的优缺点，解答ajax实现注册的相关问题，

这篇文章主要围绕ajax 注册事件 页面加载执行js事件和ajax实现注册展开，旨在为您提供一份详细的参考资料。我们将全面介绍ajax 注册事件 页面加载执行js事件的优缺点，解答ajax实现注册的相关问题，同时也会为您带来ajax 加载 页面 执行 js、ajax 执行成功后返回j页面加载 joson 数据（加载select数据）、Ajax动态刷新元素js事件失效、Ajax局部更新导致JS事件重复触发问题的解决方法的实用方法。

• ajax 注册事件 页面加载执行js事件（ajax实现注册）
• ajax 加载 页面 执行 js
• ajax 执行成功后返回j页面加载 joson 数据（加载select数据）
• Ajax动态刷新元素js事件失效
• Ajax局部更新导致JS事件重复触发问题的解决方法

ajax 注册事件 页面加载执行js事件（ajax实现注册）

jsp 页面

<div>
<li></li>
<input id="ac-1" name="accordion-0" type="checkBox"https://www.jb51.cc/tag/dis/" target="_blank">display: none;" />
<label for="ac-1" id ="title-1">Car Database
<img id="img-0"src="../images/progress/common/add.png" />
</label>
<articleid="accordion-content0"></article>
<li></li>
</div>

js 代码

<script src="${pageContext.request.contextpath}/plugin/jquery/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextpath}/plugin/jquery/jquery-ui-1.8.20.custom.min.js"></script>

//注册事件

$(document).ready(function() { $("input[name='accordion-0']").attr("checked","checked"); $("#img-0").attr('src','../images/progress/common/sub.png'); var url = contextpath + "/market/showCar.action"; //点击加号 后加载 Car Database 录入界面 $("#accordion-content0").load(contextpath + "/market/showCar.action",{'sID':'${sID}'}); });

ajax 加载 页面 执行 js

// 第一步：匹配加载的页面中是否含有js
var regDetectJs = /<script(.|\n)*?>(.|\n|\r\n)*?<\/script>/ig;
var jsContained = ajaxLoadedData.match(regDetectJs);

// 第二步：如果包含js，则一段一段的取出js再加载执行
if(jsContained) {
 // 分段取出js正则
 var regGetJS = /<script(.|\n)*?>((.|\n|\r\n)*)?<\/script>/im;

// 按顺序分段执行js
 var jsNums = jsContained.length;
 for (var i=0; i<jsNums; i++) {
  var jsSection = jsContained[i].match(regGetJS);

if(jsSection[2]) {
   if(window.execScript) {
    // 给IE的特殊待遇
    window.execScript(jsSection[2]);
   } else {
    // 给其他大部分浏览器用的
    window.eval_r(jsSection[2]);
   }
  }
 }
}

ajax 执行成功后返回j页面加载 joson 数据（加载select数据）

后台代码josn 数据传给前台

import net.sf.json.JSONObject;

CarDataCache.getInstance().refreshCarList();
Map<String,List> mapUtils = new HashMap<String,List>();
mapUtils.put("vmCarSeriesList",vmCarSeriesList);
JSONObject object = JSONObject.fromObject(mapUtils);
result = object.toString();
outPutMssage(result);

前台 代码

$.ajax({
async:false,
type: 'POST',
url:saveCarurl,
data: formData,
dataType: 'json',
success:function(data){
if(data!= null && data !=-1){
var optionhtml = '<option value="0"></option>';
var index =0;
var staffList = data.staffList;
for(index =0 ; index < staffList.length; index++){
optionhtml = optionhtml + '<option value='+staffList[index].staff_id+'>'+staffList[index].staff_name+" "+staffList[index].staff_surname+'</option>';
}
$("#staffId").empty();
$("#staffId").append(optionhtml);
var msgBox = $("#waringBox1"); //显示提示框
initAlertMarket(328,109,msgBox.html());
}
}
});

提示框

<div id="waringBox1"
https://www.jb51.cc/tag/dis/" target="_blank">display: none;background-color:transparent;">
<div
https://www.jb51.cc/tag/contextpath/" target="_blank">contextpath}/images/tips/tip6-save.png);width:328px;height: 109px;background-color:transparent;">
<div>
<input id="yellowwaringbtn" type="button" value=""
onclick="hideWarinDiv();"
https://www.jb51.cc/tag/contextpath/" target="_blank">contextpath}/images/tips/blue-esc.png);background-color:transparent;border: none;" />
</div>
</div>
</div>

提示框js

function initAlertMarket(width,height,content){ var msgw,msgh,bordercolor; msgw= width;//提示窗口的宽度 msgh= height;//提示窗口的高度 //titleheight=25 //提示窗口标题高度 var sWidth,sHeight; sWidth=document.body.offsetWidth; sHeight=screen.height; var bgObj=document.createElement("div"); bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.backgroundcolor="#transparent"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); var msgObj=document.createElement("div") msgObj.setAttribute("id","msgDiv"); msgObj.setAttribute("align","center"); msgObj.style.backgroundcolor="transparent"; msgObj.style.border="1px solid " + bordercolor; msgObj.style.position = "absolute"; msgObj.style.left = "60%"; msgObj.style.top = "40%"; msgObj.style.font="12px/1.6em Verdana,Geneva,Arial,Helvetica,sans-serif"; msgObj.style.marginLeft = "-225px" ; msgObj.style.marginTop = -85+document.documentElement.scrollTop+"px"; msgObj.style.width = msgw + "px"; msgObj.style.height =msgh + "px"; msgObj.style.textAlign = "center"; msgObj.style.lineHeight ="7px"; msgObj.style.zIndex = "10001"; document.body.appendChild(msgObj); var txt=document.createElement("p"); txt.style.margin="1em 0" txt.setAttribute("id","msgTxt"); txt.innerHTML=content; document.getElementById("msgDiv").appendChild(txt); }

Ajax动态刷新元素js事件失效

工作中遇到一个情况，通过Ajax动态刷新某一区域后，原来绑定在这些dom元素上的js事件就失效了，定位了半天也不知道原因在那，后来查了资料发现动态刷新后的区域Dom元素是重新生成，所以页面之前的js不会动态绑定到新生成的元素上，这怎么解决呢，这里就用到了jQuery的事件委托机制来实现，示例代码如下：

jQuery1.7版本以前可以通过live事件委托方式：

$(selector).live("click",function(){
    // 事件逻辑
});

1.7版本后jQuery废除了live事件，而是采用了统一的api方式，这样对程序开发人员来说是个好消息，不用记那么多api了，统一用on的方式调用：

$(document).on("click",selector,function(){
    // 事件逻辑
})

Ajax局部更新导致JS事件重复触发问题的解决方法

如果在页面中包含一个ajax更新的列表，那么需要小心非动态更新部分的事件处理。

以带有公共工具栏的列表界面为例：

$.ajax( 
.... 
data: { ... 
}, 
success: function(data) { 
$('Menu1').click( 
function(){ 
//do something 
} 
); 
} 
)

由于Menu1界面部分是公共的，并不会随着列表数据的更新而被重新载入，那么上面的代码将产生重复的click事件触发（在多次更新列表后）。

所以我们要注意，在ajax列表更新的结果处理中，不能包含工具栏事件侦听的重新初始化。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程，AJAX视频教程！

我们今天的关于ajax 注册事件 页面加载执行js事件和ajax实现注册的分享已经告一段落，感谢您的关注，如果您想了解更多关于ajax 加载 页面 执行 js、ajax 执行成功后返回j页面加载 joson 数据（加载select数据）、Ajax动态刷新元素js事件失效、Ajax局部更新导致JS事件重复触发问题的解决方法的相关信息，请在本站查询。