如何通过使用jQuery来解决动态加载页面重复对象？ [英] How to solve duplicate objects in dynamic loading page by using jQuery?
问题描述
我要解决动态加载的内容重复的对象。请看下面的源$ C $ C更容易理解。
基本页的HTML与1动态加载内容
＆LT;身体GT; ＆LT; DIV ID =一般DIV＆GT;＆LT; / DIV＆GT;＆GT; ＆LT; DIV ID =div1的＆GT;＆LT; / DIV＆GT; ＆LT; DIV ID =PLACEHOLDER1＆GT; 动态内容将放在这里面。 ＆LT; DIV CLASS =内格＆GT;＆LT; / DIV＆GT; ＆LT; DIV CLASS =div1的＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; /身体GT;
有关此页面的页眉脚本，它很容易选择类似下面的code一般DIV的对象。
$（'＃通用DIV'）
这对内部PLACEHOLDER1选择内格的对象很容易。因此，我可以通过使用下面的code选择。
$（'内DIV'）
以上code可以完美的作品。但是，我不能用上面的code时，有像下面的HTML相同的文档超过1复制的对象。上述code将返回两个对象不我想要的。
基本页HTML - 负荷再经过动态加载内容
＆LT;身体GT; ＆LT; DIV ID =一般DIV＆GT;＆LT; / DIV＆GT;＆GT; ＆LT; DIV ID =div1的＆GT;＆LT; / DIV＆GT; ＆LT; DIV ID =PLACEHOLDER1＆GT; 动态内容将放在这里面。 ＆LT; DIV CLASS =内格＆GT;＆LT; / DIV＆GT; ＆LT; DIV CLASS =div1的＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; DIV ID =PLACEHOLDER2＆GT; 动态内容将放在这里面。 ＆LT; DIV CLASS =内格＆GT;＆LT; / DIV＆GT; ＆LT; DIV CLASS =div1的＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ＆LT; /身体GT;
可能的解决方法1
我必须创建类似如下code动态加载的内容指定的jQuery对象的foreach脚本。
//深复制的jQuery对象。
VAR specfiedjQueryObj = $ .extend（真，{}，jQuery的）;
//修改jQuery对象查找功能。
specfiedjQueryObj.fn.find =功能（选择）
{
//通过添加占位符选择EVAL结果之前。
返回新specfiedjQueryObj.fn.old_find（'＃PLACEHOLDER1+选择）;
};
//所以，我可以选择在动态加载内容的任何对象。
（函数（$）
{
//这个结果必须是1对象。
$（'。DIV1'）;
}）（温度）;
虽然，这个解决方案应该是工作的伟大。但我发现，jQuery是一个非常复杂的对象。我发现了很多的错误，当我尝试使用它。
你有任何想法来解决这个问题呢？
PS。占位符ID不是一个固定的编号。所以，这是不可能的选择规则固定它。此外，我不知道确切的文件它的量元素和位置（第一，最后或中间）。由于动态加载的内容将在很多页面显示。
下面的函数将处理来自部分加载查看页面数据，并添加指定的范围内为每个jQuery选择脚本。这个答案效果很好。然而，它不支持外部脚本文件。
函数renderPartialView（控制，数据）
{
//用于检测加载数据的所有脚本标签。
VAR reExtractScript = /（小于脚本类型=文\ / JavaScript的＆GT;）（[\ S \ S] +？）（小于\ / SCRIPT＆GT;）/ GI;
//为了检测所有的$符号（必须是jQuery对象）中加载的数据。
VAR reFindDollarSign = / \ $ \（（[\ S] +）\？）/ GI;
//查找在加载数据的所有匹配的字符串。
VAR的结果= reExtractScript.exec（数据）;
VAR allScript ='';
如果（结果）
{
对于（i = 0; I＆LT; result.length; I + = 4）
{
//从加载脚本删除当前脚本。
数据= data.replace（结果[I]，''）;
//通过添加上下文参数就是控制全部替换$的功能。
allScript + =结果[I + 2] .replace（reFindDollarSign，'$（$ 1，'+控制+'）'）;
}
}
//将非HTML的脚本来控制。
$（控制）。html的（数据）;
//评估是在加载的数据中找到的所有脚本。
的eval（allScript）;
}
//这个脚本将部分在同一个域中的服务器下载查看页面
$（函数（）
{
$获得（的getURL（〜/资料/科/ ViewEducation），空，功能（数据）
{
//当部分加载完成后，所有加载的数据将被发送到renderPartialView功能
renderPartialView（'＃教育观，数据）;
}）;
}）;
I want to solve duplicate objects in dynamic loading content. Please look at the following source code for easier understand.
Base Page HTML With 1 Dynamic Loading Content
<body> <div id="general-div"></div>> <div id="div1"></div> <div id="placeholder1"> Dynamic Content will be placed inside this. <div class="inner-div"></div> <div class="div1"></div> </div> </body>
For script in header of this page, it's very easy to select "general-div" object like the following code.
$('#general-div')
It's quite easy for select "inner-div" object inside placeholder1. So I can select by using the below code.
$('.inner-div')
The above code could works perfectly. However, I can't use the above code when there is more than 1 duplicated object in the same document like the following HTML. The above code will return 2 objects that don’t what I want.
Base Page HTML - After load another dynamic loading content
<body> <div id="general-div"></div>> <div id="div1"></div> <div id="placeholder1"> Dynamic Content will be placed inside this. <div class="inner-div"></div> <div class="div1"></div> </div> <div id="placeholder2"> Dynamic Content will be placed inside this. <div class="inner-div"></div> <div class="div1"></div> </div> </body>
Possible Solution 1
I must create specified jQuery object foreach script in dynamic loading content like the following code.
// Deep copy for jQuery object.
var specfiedjQueryObj = $.extend(true, {}, jQuery);
// modify find function in jQuery object.
specfiedjQueryObj.fn.find = function(selector)
{
// by adding placeholder selector before eval result.
return new specfiedjQueryObj.fn.old_find('#placeholder1 ' + selector);
};
// So, I can select any object in dynamic loading content.
(function($)
{
// This result must be 1 object.
$('.div1');
})(temp);
Even though, this solution should be work great. But I found that jQuery is a very complex object. I found a lot of errors when I try to use it.
Do you have any idea for solving this problem?
PS.PlaceHolder Id is not a fixed Id. So, It's impossible to fixed it in selector rule. Moreover, I do not know exactly amount of element and position (first, last or middle) of it in document. Because of dynamic loading content will be displayed on a lot of page.
The following function will process data from partial loading view page and add specified context for each jQuery selector in script. This answer works well. However, it does not support external script file.
function renderPartialView(control, data)
{
// For detecting all script tag in loaded data.
var reExtractScript = /(<script type="text\/javascript">)([\s\S]+?)(<\/script>)/gi;
// For detecting all "$" sign (must be jQuery object) in loaded data.
var reFindDollarSign = /\$\(([\S]+?)\)/gi;
// Find all matched string in loaded data.
var result = reExtractScript.exec(data);
var allScript = '';
if (result)
{
for (i = 0; i < result.length; i += 4)
{
// Remove current script from loaded script.
data = data.replace(result[i], '');
// Replace all "$" function by adding context parameter that is control.
allScript += result[i+2].replace(reFindDollarSign, '$($1, "' + control + '")');
}
}
// Load non-script html to control.
$(control).html(data);
// Evaluate all script that is found in loaded data.
eval(allScript);
}
// This script will partially download view page from server in the same domain
$(function()
{
$.get(getUrl('~/Profile/Section/ViewEducation'), null, function(data)
{
// When partial loading is complete, all loaded data will be sent to "renderPartialView" function
renderPartialView('#education-view', data);
});
});
这篇关于如何通过使用jQuery来解决动态加载页面重复对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
