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

小编典典

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

ajax

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

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

对于此页眉中的脚本，很容易选择“ general-div”对象，如以下代码所示。

 $('#general-div')

在占位符1中选择“ 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。 PlaceHolder ID不是固定ID。
因此，不可能将其固定在选择器规则中。而且，我不知道文件中元素的确切数量和位置（第一个，最后一个或中间）。由于动态加载，内容将显示在很多页面上。

阅读 398

2020-07-26

共1个答案

小编典典

以下函数将处理部分加载视图页面中的数据，并为脚本中的每个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);
    });
});

2020-07-26