runat="server" 破坏了我的 jquery / css 功能答案

【问题标题】：runat="server" breaks my jquery / css functionalityrunat="server" 破坏了我的 jquery / css 功能
【发布时间】：2011-05-29 03:48:01
【问题描述】：

我有一个页面，它使用 JQuery 更改页面上的媒体，例如图片或 PDF，以便每次用户单击都不需要刷新页面/访问新数据库。

我有一个存放所有这些活动的 DIV 容器。它有效并且看起来很棒！当我将 runat="server" 添加到 DIV 标记时，我所有的好行为都会中断。这还没有编写任何代码来操作对象服务器端。出于某种原因，我的样式/行为没有得到正确应用。

我猜有些简单，但我已经厌倦了猜测。我希望这里有人知道为什么会发生这种情况？

编辑：这是针对 ASP.Net 应用程序的。

  <div id="slidingContent" runat="server" >
    <div class="item" id="media3" name="media3">
       My media here.
    </div>
  </div>

【问题讨论】：

【解决方案1】：

我假设您在 .net 应用程序的上下文中具有此功能。如果是这样，您应该在问题的某处指定。 runat="server" 将破坏 id;在您的浏览器中查看 HTML 源代码以了解它的确切作用。您需要在标记中添加类并修改 CSS 和 JavaScript 以使用类而不是 id。

【讨论】：

是的，我认为很可能是这样。我继承了这个由网页设计师构建的项目，并且我正在添加代码以加载从 SQL 服务器中提取的媒体。 CSS ID 的网络令人印象深刻，我很难驾驭它。我一直在破坏设计...啊。

【解决方案2】：

正如其他人所提到的，如果您使用的是 ASP.NET，如果您有 runat="server"，它将修改您的 ID。要解决方法，请在您的 JS 中使用：

document.getElementByID("<%=slidingContent.ClientID%>");

或

$("#<%=slidingContent.ClientID%>");

【讨论】：

【解决方案3】：

在渲染页面上查看源代码。 id="slidingContent" 可能已被 asp.net 更改。

【讨论】：

【解决方案4】：

我不知道您是否使用了主/内容页面，但如果是这样，我发现有效的方法是为您的主/内容页面提供一个 ID。

如果您只是使用其中的一个，并假设您为母版页指定一个 ID 为“Mstr”，并且为内容页指定一个 ID 为“Cont”，您可以像这样创建 JavaScript 前缀：

var masterPrefix = "Mstr_",
    contentPrefix = "Cont_";

然后，您可以创建一个名为 $getElement() 的函数，它允许您传递您在标记中提供的 ID，如下所示：

function $getElement(id) {
    return $("#" + masterPrefix + contentPrefix + id);
}

然后，根据您的具体示例，您可以通过执行以下操作将 jQuery 对象添加到您的 runat="server" div：

var $slidingContent = $getElement("slidingContent");

当您进入需要大量客户端脚本的大型项目时，我发现这种方法可以挽救生命。

或者，如果你不喜欢调用另一个函数来返回你的对象，你可以这样做：

var $slidingContent = $('div[id$="slidingContent"]');

这里你只是说给我一个 ID 以“slidingContent”结尾的 div。

【讨论】：

我会尝试这个想法...谢谢。真的很难理解 ASP 分配破坏 JS/CSS 的 ID 的更基本的问题。网页设计师编写的网站在结合 ASP.Net 为其操作的元素分配 ID 的要求时并不是超级友好。