代码之家 › 专栏 › 技术社区 › Soul_Master

如何使用jquery解决动态加载页面中的重复对象?

asp.net-ajax ajax asp.net-mvc jquery asp.net

Soul_Master · 技术社区 · 16 年前

我想解决动态加载内容中的重复对象。请查看以下源代码以便于理解。

具有1个动态加载内容的基本页HTML

<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>

对于这个页面头部的脚本,很容易像下面的代码一样选择“GeneralDiv”对象。

 $('#general-div')

在placeholder1中选择“inner div”对象非常容易。所以我可以使用下面的代码进行选择。

 $('.inner-div')

上面的代码可以完美地工作。但是,当同一文档中有一个以上的重复对象(如下面的HTML)时,我不能使用上述代码。上面的代码将返回2个不符合我想要的对象。

基本页HTML-加载另一个动态加载内容后

<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>

可能的解决方案1

我必须在动态加载内容(如以下代码)中为每个脚本创建指定的jquery对象。

 // 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);

尽管如此,这个解决方案还是很有效的。但我发现jquery是一个非常复杂的对象。我试着用的时候发现了很多错误。

你有办法解决这个问题吗?

PS。占位符ID不是固定ID。因此,无法在选择器规则中固定它。此外,我不清楚文档中元素的数量和位置(第一、最后或中间)。由于动态加载,内容会显示在很多页面上。

4 回复 | 直到 16 年前

Alex Gyoshev 16 年前

怎么样 $('div[id^=placeholder]:last') ?

Selectors / attrubuteStartsWith

Jose Basilio 16 年前

你可以简单地使用 $('.innerdiv:first') 得到 first 一个或 $('.inner-div:last') 得到 last 一个。或者如果你有多个,想要选择一个特定的 $('.inner-div:nth(x)') 其中x是项目的索引。

Soul_Master 16 年前

以下函数将处理部分加载视图页中的数据,并为脚本中的每个jquery选择器添加指定的上下文。这个答案很有效。但是,它不支持外部脚本文件。

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);
    });
});

artlung 16 年前

好吧,我们来谈谈您的HTML示例。我添加了一个占位符类,并在ID中添加了一个破折号以便以后使用。

<div id="placeholder-1" class="placeholder">
     Dynamic Content will be placed inside this.

     <div class="inner-div">baz</div>
     <div class="div1">zip</div>
     <a href="#" class="action">action</a>
</div>
<div id="placeholder-2" class="placeholder">
     Dynamic Content will be placed inside this.

     <div class="inner-div">foo</div>
     <div class="div1">bar</div>
     <a href="#" class="action">action</a>
</div>

现在我可以将事件绑定到每个链接 $('.placeholder a.action').bind('click', ... ); 如果我想让这个事件在以后的页面上出现这样的HTML块,我会的。 $('.placeholder a.action').live('click', ... );

此代码将向这些链接附加一个事件,并且 var 语句可以捕获ID或 <div> 这样您就没有冲突的id属性值,但是您可以遍历内部的操作。 div 具有类占位符的。

$('.placeholder a.action').live('click', function(){
    // get the id
    var id = $(this).parents('div.placeholder').attr('id').split('-')[1];
    // get the text inside the div with class inner-div
    var inner_div = $(this).parents('div.placeholder').children('.inner-div').text();
    // get the text inside the div with class div1
    var div1 = $(this).parents('div.placeholder').children('.div1').text();
    return false;
});