jQuery的阿贾克斯后刷新页面无法正常工作 [英] Jquery not working after ajax refresh page

问题描述

我用一个jQuery code，检查所有的复选框，我做这样的：

VAR JQ7 = jQuery.noConflict（）; JQ7（文件）。就绪（函数（）{ JQ7（＃chkAll）。点击（函数（）{     JQ7（CHK）。托（选中，JQ7（＃chkAll）。托（选中）） }） }）; ... ＆LT;输入类型=复选框ID =chkAll/＆GT; ... ＆LT;输入类型=复选框级=CHK/＆GT;

我把所有code在AJAX页面。在第一次加载它工作正常，但我刷新后，它并没有为我工作。这里是阿贾克斯code：

函数showUser（STR，帮您做生意，类型，次）  {      如果（STR ==||您做生意==||型==||子==）  {      的document.getElementById（txtHint）的innerHTML =。      返回;  }  如果（window.XMLHtt prequest）  {// $ C $下IE7 +，火狐，Chrome，歌剧，Safari浏览器      XMLHTTP =新XMLHtt prequest（）;  }  其他  {// code对IE6，IE5      XMLHTTP =新的ActiveXObject（Microsoft.XMLHTTP）;  }  xmlhttp.onreadystatechange =功能（）  {      如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）      {          的document.getElementById（txtHint）的innerHTML = xmlhttp.responseText。      }  }  xmlhttp.open（GET，＆LT; PHP的echo $视图[路由器 - ＆gt;有？生成（上市）GT;页=+您做生意+＆放大器;类型=+ STR +＆放大器;猫=+类型+＆放大器; subcat =+子，真正的）;  xmlhttp.send（）;  }

解决方案

如果你正在构建部分页面动态，你需要附上您的事件处理程序使用$（...）。在（），否则当元素被替换的事件处理程序将丢失。或者，您也可以再次重新连接的事件处理程序时，页面的一部分被修改。

您需要附加的事件处理程序与像这样第二个选择参数：

  $（＃父）。在（点击，.item，待点击功能（）{
    ...
}）;
 

的委托与非委派的事件处理程序实例： http://jsfiddle.net/pj5EW/

I'm using a jquery code to check all checkboxes and I do like that:

var JQ7=jQuery.noConflict();
JQ7(document).ready(function(){
JQ7("#chkAll").click(function(){
    JQ7(".chk").prop("checked",JQ7("#chkAll").prop("checked"))
}) 
});
...
<input type="checkbox" id="chkAll" />   
...
<input type="checkbox" class="chk" />

I put all code in the ajax page. At the first loading it works fine but after I refresh, it doesn't work for me. Here is the ajax code :

 function showUser(str,pageno,type,sub)
 {
     if (str=="" || pageno=="" || type=="" || sub== "")
 {
     document.getElementById("txtHint").innerHTML="";
     return;
 }
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
         document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     }
 }

 xmlhttp.open("GET","<?php echo $view['router']->generate('listing') ?>?page="+pageno+"&genre="+str+"&cat="+type+"&subcat="+sub,true);
 xmlhttp.send();
 }

解决方案

if you're constructing parts of your page dynamically, you'll need to attach your event handlers with $(...).on(), otherwise the event handlers will be lost when the elements are replaced. Alternatively, you can also reattach the event handlers again when that part of the page is modified.

You need to attach your event handlers with the second selector parameter like so:

$("#parent").on("click", ".item-to-be-clicked", function () {
    ...
});

Example of delegated vs non delegated event handler: http://jsfiddle.net/pj5EW/

这篇关于jQuery的阿贾克斯后刷新页面无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！