在同一文档中多次加载同一 html 页面后识别哪个页面处于活动状态的问题答案

【问题标题】：Problems identifing which page is active after loading same html page multiple times in same document在同一文档中多次加载同一 html 页面后识别哪个页面处于活动状态的问题
【发布时间】：2017-01-03 02:16:46
【问题描述】：

我有一个如下所示的主页：

<div id="main">
  <div id="content1"/>
  <div id="content2"/>
</div>

我正在使用 ajax 从同一个文件（比如 Content.aspx）动态加载 content1 和 content2。

<div id="content">
  <input id="content_data" type="hidden" value="whatever"/>
</div>

由于 content1 和 content2 中的 html 共享元素 id，jquery 总是找到 content1 元素：

$("#content_data").val();

如果我使用父 div，我可以得到我想要的数据：

$("#content1").find("#content_data").val();

问题：

给定一个 Content.aspx 页面，该页面（在客户端）如何知道它是哪个容器 div？

在 Page_load（服务器端）我知道页面索引，我可以将其保存在页面的隐藏字段中，但在客户端，当我运行 jquery 获取隐藏索引时，我不知道要查看哪个父 div - 除非我忽略了某些东西（很有可能），否则这是一个 catch-22 情况。

如果我可以获取一个元素，我可以查询它的父元素并确定它在哪个内容 div 中，但我无法做到这一点，因为要获取一个元素我需要使用 jquery 并且它总能找到元素在第一个内容 div 中。所以客户端我不能从一开始就知道我在哪里。

首先，这是完成我想要的一个好方法吗，两个或多个 div 加载了相同的页面（但不同的数据）存在于同一个文档中？

我想到的另一种方法是拥有多个 content.aspx 页面、content1.apsx、content2.aspx 等等……每个页面都相同，但具有基于其序号位置的唯一元素 ID。

我觉得这会更“安全”，但需要更多的维护以使所有页面随着事情的变化保持同步。

如果您想知道，我正在尝试完成的特定用例是在一个单页 Web 应用程序中同时打开多个客户页面。

【问题讨论】：

如果 id 是问题，那么使用一个类，如果这就是问题/问题的原因
这是错误的 $("#content1").find("#content_data").val();从 sn-p，content_data 在内容不是 content1
嗯，这是一个很难解释的问题，我遇到的问题是我在加载页面后运行的 javascript 来完成页面的工作（例如加载数据）不'知道它应该在哪个页面上工作。 javascript 对所有页面都是通用的，即使我将它包含在各个页面中也是一样的。
Bindrid - 是的，我应该更清楚一点，它是 content1（和 content2 的子对象），因为我计划通过 ajax 将内容加载到 content1 和 content2 中。
好的，开始更清楚地思考这个问题，'active' div 不会被隐藏，所以我可以用一个类（'active'，也许！）然后调用 javascript对于模糊、点击等，该页面上的事件可以寻找活动的 div 子级来处理...

标签： jquery html asp.net

【解决方案1】：

虽然对回答我自己的问题犹豫不决，但这是我正在使用的解决方案，它可以工作，并且不会遇到我在尝试维护当前活动页面的外部指示器时遇到的任何陷阱，该指示器容易计时当 ajax 加载缓慢并且用户单击加载另一个内容 div 时出现问题...

我的解决方案是为每个 div 设置一个唯一的页面/javascript，但由于页面/javascript 是 100% 相同的，除了 id（和数据模型）我只在服务器上维护一个页面副本，其中包含 javascript包含在头部（便于访问），并且所有标识符都以唯一关键字作为后缀，该关键字在 ajax 成功时被文本替换为父 div 的序号索引。

所以我的内容页面如下所示：

<head>
  <script>
    kendo.bind($("#clientUNIQUE"), clientViewModel[UNIQUE]);    
  </script>
</head>

<body>
  <div id="clientUNIQUE">
    content here
  </div>
</body>

然后在 ajax 成功：

result = result.replace(/UNIQUE/g, ndx);
$("#content" + ndx).html(result);

【讨论】：