jQuery的功能需要再次运行后，阿贾克斯完成 [英] jQuery Functions need to run again after ajax is complete
问题描述
我正在开发一个网站，解析RSS源，并根据类别进行显示。你可以在这里查看： http://vitaminjdesign.com/adrian
我使用标签来显示每个类别。该卡使用Ajax显示一组新的饲料，他们被点击的时候。
我还使用另外两个scripts-一位名为 equalheights ，从而重新大小的所有高度到最高的项目中。我现在用的是其他脚本被称为智能列，基本上是调整你的专栏所以它总是充满屏幕。
我遇到的第一个问题是，当你点击一个新的标签（该类别内，以显示供稿）。当一个新的选项卡被点击，控制台显示一个jQuery错误：
$（块）。equalHeights不是一个函数
[打破这个错误] $ equalHeights（）（块）。
主要的问题是，每个进给箱填满整个屏幕的宽度（在你点击一个选项卡上），即使有多个进料箱在该类别中。
我的猜测 - 尽管所有的饲料（所有选项卡）的页面加载上加载，当选择一个新的标签，无论是jQuery的脚本需要再次运行。我如何使这项工作正常任何想法？
需要注意的一点 - 我用的ajaxSuccess制法equalHeights在第一页上工作...但标签被点击之后，它不会工作。
我的jQuery的code的选项卡如下：
$（。tab_content）隐藏（）; //隐藏所有内容
$（ul.tabs李：第一）addClass（活动）显示（）。 //激活第一个选项卡
$（。tab_content：第一）显示（）。 //显示第一个选项卡的内容
$（＃城市里：第n个孩子（1））addClass（'斑马线'）。
$（＃列李UL李：第n个孩子（6））。addClass（'ZEBRA1'）;
//在Click事件
$（ul.tabs李）。点击（函数（）{
$（ul.tabs李）removeClass移除（活动）。 //删除任何积极级
$（本）.addClass（活性）; //添加积极级到选定的标签
$（tab_content）隐藏（）。 //隐藏所有选项卡的内容
变种activeTab = $（本）.find（一）ATTR（的href）; //查找href属性值来确定当前标签+内容
$（activeTab）.fadeIn（）;在活动ID的内容//淡出
$（块）equalHeights（）。
返回false;
}）;
由于梅西（见回答以下），我带了我的jQuery脚本到以下几点：（仍然不工作）
$（文件）.ajaxSuccess（函数（）{
VAR脚本= document.createElement方法（脚本）;
script.src ='JS / equalHeight.js;
document.body.appendChild（脚本）;
equalHeight（$（块））;
我发现你的code一些小问题。我不知道，我的建议将解决所有的问题，但我决定在这里形容我的第一个成果。
1）你应该删除之前的'}'逗号。目前，呼叫的样子 $（＃列）排序（{/ ** /，}）;
2）的函数 equalHeight 不是jQuery插件。这就是为什么在调用 $（块）equalHeights（）; 在你的点击事件处理程序如下的错误$（块 ）.equalHeights是不是你所描述的功能。您应该改变的code的地方 equalHeight（$（块））; 就像你在其他地方使用它
3）脚本 http://vitaminjdesign.com/adrian/js/equalHeight.js 定义函数 equalHeight ，而不是只启动任何动作。一旦加载它留在页面上。所以，你的在每一个Ajax请求的结束应该不会加载它。因此，我建议，以减少脚本
$（文件）.ajaxSuccess（函数（）{
VAR脚本= document.createElement方法（脚本）;
script.src ='http://vitaminjdesign.com/adrian/js/equalHeight.js';
document.body.appendChild（脚本）;
equalHeight（$（块））;
$（一个[HREF ^ ='的http：']：否（[HREF * ='+ window.location.host +']））。每个（函数（）{
$（本）.attr（目标，_blank）;
}）;
}）;
到
$（文件）.ajaxSuccess（函数（）{
equalHeight（$（块））;
$（一个[HREF ^ ='的http：']：否（[HREF * ='+ window.location.host +']））。每个（函数（）{
$（本）.attr（目标，_blank）;
}）;
}）;
4）我建议改变 http://vitaminjdesign.com/的code阿德里安/ JS / equalHeight.js 从
函数equalHeight（组）{
最高= 0;
group.each（函数（）{
thisHeight = $（本）.height（）;
如果（thisHeight＆GT;最高）{
最高= thisHeight;
}
}）;
group.height（最高）;
}
到
函数equalHeight（组）{
变种最高= 0;
group.each（函数（）{
VAR thisHeight = $（本）.height（）;
如果（thisHeight＆GT;最高）{
最高= thisHeight;
}
}）;
group.height（最高）;
}
消除全局变量的使用最高和 thisHeight 。我建议你使用 JSLint的验证所有的JavaScript codeS。我觉得非常有帮助的。
5）我建议你使用任何XHTML验证发现，在标记一些小的，但有时非常重要的错误。尝试这个比如看到一些错误。你按照XHTML标准的越多就越是让网页在不同的网页浏览器相同的结果的概率。顺便说一句，您可以极大地减少错误的数量在当前code如果包含在网页中的脚本会在下面的表单
＆LT;脚本类型=文/ JavaScript的＆GT;
//＆LT;！[CDATA [
/ *这里是JavaScript code * /
//]]≥
＆LT; / SCRIPT＆GT;
我不分析了全code，但我希望我的建议将至少解决一些你在你的问题中描述的问题。
I am developing a website that parses rss feeds and displays them based on category. You can view it here: http://vitaminjdesign.com/adrian
I am using tabs to display each category. The tabs use ajax to display a new set of feeds when they are clicked.
I am also using two other scripts- One called equalheights, which re-sizes all of the heights to that of the tallest item. And the other script I am using is called smart columns, which basically resize your columns so it always fills the screen.
The first problem I am having is when you click a new tab (to display feeds within that category). When a new tab is clicked, the console shows a jQuery error:
$(".block").equalHeights is not a function
[Break On This Error] $(".block").equalHeights();
The main problem is that each feed box fills up the entire screen's width (after you click on a tab), even if there are multiple feed boxes in that category.
MY GUESS - although all of the feeds (across all tabs) are loaded on pageload, when a new tab is selected, both jQuery scripts need to be run again. any ideas on how I can make this work properly?
One thing to note - I used the ajaxSuccess method for making equalHeights work on the first page...but it wont work after a tab is clicked.
My jQuery code for the tabs are below:
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
$("#cities li:nth-child(1)").addClass('zebra');
$("#column li ul li:nth-child(6)").addClass('zebra1');
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
$(".block").equalHeights();
return false;
});
Thanks to Macy (see answer below), I have brought my jQuery script to the following: (still does not work)
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
I found some small problems in your code. I am not sure that my suggestions will solve all the problems, but I decide to describe my first results here.
1) You should remove comma before the '}'. Currently the call look like $("#column").sortable({/**/,});
2) The function equalHeight is not jQuery plugin. It is the reason why the call $(".block").equalHeights(); inside your 'click' event handler follows to the error "$(".block").equalHeights is not a function" which you described. You should change the place of the code to equalHeight($(".block")); like you use it on other places.
3) The script http://vitaminjdesign.com/adrian/js/equalHeight.js defines the function equalHeight only and not start any actions. Once be loaded it stay on the page. So you should not load it at the end of every ajax request. So I suggest to reduce the script
$(document).ajaxSuccess(function(){
var script = document.createElement('script');
script.src = 'http://vitaminjdesign.com/adrian/js/equalHeight.js';
document.body.appendChild(script);
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
to
$(document).ajaxSuccess(function(){
equalHeight($(".block"));
$("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() {
$(this).attr("target", "_blank");
});
});
4) I suggest to change the code of http://vitaminjdesign.com/adrian/js/equalHeight.js from
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
to
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
to eliminate the usage of global variables tallest and thisHeight. I recommend you to use JSLint to verify all your JavaScript codes. I find it very helpful.
5) I recommend you to use any XHTML validator to find some small but sometime very important errors in the markup. Try this for example to see some errors. The more you follow the XHTML standards the more is the probability to have the same results of the page in different web browsers. By the way, you can dramatically reduce the number of the errors in your current code if the scripts included in the page will be in the following form
<script type="text/javascript">
//<![CDATA[
/* here is the JavaScript code */
//]]>
</script>
I didn't analysed the full code but I hope that my suggestions will solve at least some of problems which you described in your question.
这篇关于jQuery的功能需要再次运行后，阿贾克斯完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
