单击 JavaScript do_PostBack 链接时，jQuery 切换 Divs 展开答案

【问题标题】：jQuery Toggle Divs Expand When JavaScript do_PostBack Link Is Clicked单击 JavaScript do_PostBack 链接时，jQuery 切换 Divs 展开
【发布时间】：2011-05-03 04:39:50
【问题描述】：

我正在开发一个新站点TheDigitalScale，我正在使用 jQuery 创建一个功能列表，该列表在单击时展开 div 并在再次单击时关闭 div。

<script type="text/javascript">
$(document).ready(function()
{
  //hide the all of the element with class msg_body
  $(".msg_body").hide();
  //toggle the componenet with class msg_body
  $(".msg_head").click(function()
  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });
});
</script>



<div class="msg_list">
    <p class="msg_head">They Forgot The Buttons</p>
    <div class="msg_body"><p>
    Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken. 
    </p></div>
    </div>

它工作正常，但我还有一个产品评论链接，它使用 JavaScript do_PostBack 函数来展开评论面板。

<a href="javascript:__doPostBack('ctl00$wpm$ShowProduct$ctl07$ReviewLink','')">Review and Rate this item</a>

点击评论链接时，会导致所有 jQuery div 展开。

当我将 enablepartialrendering 设置为 false 并“修复”问题时，当点击评论链接时，它会将用户带到页面顶部并展开评论面板，而不仅仅是展开评论面板并将用户留在正确的位置。

我希望我解释得足够好；我对 jQuery、JavaScript 和 AJAX 非常陌生。

问候，沙拉

编辑：

我想我并没有真正问过问题所以......

我可以进行哪些更改以使评论链接展开评论面板并让用户留在该区域而不展开每个 jQuery div？

这是产品页面的链接：MBSC-55

【问题讨论】：

我认为 __doPostBack 是一个 .net 的东西，可能应该将它包含在问题的标签中。是否有一个可访问的页面，我们可以看到正在发生的事情？
您好 kingjiv，感谢您的标签建议。该站点使用 ASP.net 和 AJAX。这是一个包含问题的产品页面：link。现在我用 enablepartialrendering="true" 设置它，所以当点击“查看和评价这个项目”链接时，div 会展开。
这是否包含在更新面板中？如果是这样，请检查更新面板是否没有返回扩展器项目，这将替换 div 的内容，破坏你的代码......
@Shala 你试过把：$(".msg_head").click(function()改成$(".msg_head").bind('click', function()吗？甚至可以在评论中添加一个功能，例如 $('a.review').live('click', function(prev){ prev.preventDefault(); }); ... 或类似的东西。

标签： javascript jquery asp.net

【解决方案1】：

看起来您有嵌套的更新面板。尝试将父面板的UpdateMode property设置为Conditional，以防止子更新面板触发父更新面板。

【讨论】：

看起来 kingjiv 的回答解决了这个问题。非常感谢您抽出宝贵时间回答我的问题！
不客气。但请注意：重新渲染父更新面板的内容可能会影响性能。正如 kingjiv 在他的回答中提到的那样，如果您首先使用我的方法消除不必要的 HTML，那可能是最好的。
好的，我一定会看看你提供的链接并试一试。我对此犹豫不决，因为我对此很陌生，并且担心我们的网站可能会起火。再次感谢您。
好的，我进去发现 UpdatePanel 把它改成了有条件的，现在一切都很好了。再次感谢您的回答，解释为什么它是最佳答案并提供指向我需要的信息的链接。非常感谢。

【解决方案2】：

好的，我想我明白发生了什么。当您的页面加载时，您执行以下代码：

$(document).ready(function(){
  //hide the all of the element with class msg_body
  $(".msg_body").hide();

  //toggle the componenet with class msg_body
  $(".msg_head").click(function()  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });
});

现在，当 .net 进行回发时，它正在重新创建那些 .msg_body 和 .msg_head 元素。最好的解决方案是让 .net 不替换那些（除非你需要它们）。

如果您需要重新绘制这些内容，您可以做 2 件事。首先，将 .msg_body 设置为隐藏在你的 CSS 中，这样它们默认是隐藏的。然后要处理点击问题，请将您的点击代码替换为：

  $(".msg_head").live("click", function()  {
    $(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
  });

这将导致点击处理程序仍然适用于新添加的 .msg_head 项目。

【讨论】：

工作就像一个魅力。你真的知道你是东西！非常感谢您抽出宝贵时间查看并提供答案。