MVC 4 with jQuery Mobile - Ajax 似乎覆盖了我的就绪函数

Question

好的，所以我有一个页面，其中包含一些元素和一些文本区域，这些元素和文本区域具有显示：none

根据选择元素的值，相应的文本区域通过设置$('#comment').show()的 onchange 事件变得可见

该页面是一个具有一些验证的表单，如果用户按提交并且验证未通过，则表单会重新显示相同的数据和一些错误消息。

现在我遇到的问题是，尽管所有数据显示注释框都不存在。我在我的javascript中放了一些警报以查看发生了什么，我看到在我的$（document）.ready（function（）的末尾，注释文本区域工作正常并显示正常，但之后ajax似乎重新显示整个页面，注释区域再次隐藏。

  $(document).ready(function () {
      if ($('#Scope').val() == "Yellow" || $('#Scope').val() == "Red") {
          showComments("ScopeComment");
      }
      if ($('#Schedule').val() == ("Yellow") || $('#Schedule').val() == "Red") {
          showComments("ScheduleComment");
      }
      if ($('#Financial').val() == "Yellow" || $('#Financial').val() == "Red") {
          showComments("FinancialComment");
      }
      if ($('#Resource').val() == "Yellow" || $('#Resource').val() == "Red") {
          showComments("ResourceComment");
      }
      if ($('#Risk').val() == "Yellow" || $('#Risk').val() == "Red") {
          showComments("RiskComment");
      }
      alert("hello"); -------> At this point I see the alert and behind it all correct text areas are shows, but right after I press "OK" Ajax re-displays the page and my comments all hide
  });
  function showComments(textID) {
      $('#' + textID).show();
  }

Ajax是否有自己的"ready"函数，它在jq移动就绪函数之后调用？ 或者这里发生了什么

Answer 1

我不确定哪种情况更适合您的情况，所以我会给你两个。

一个。您正在进行 ajax 调用并手动返回和更新数据

在这种情况下，您需要在将数据放在 ajax 回调期间对 document.ready 进行相同的调用。document.ready 事件仅在您第一次加载页面时调用，更新这些字段的后续 ajax 请求甚至不会触发该事件。他们有自己的活动，例如complete和success。

二.正在从服务器返回整个页面。

JQuery Mobile 不会加载一个全新的页面，而是会进行 ajax 调用以获取页面的内容并将其插入到 DOM 中。这意味着 document.ready 函数只会在您第一次导航到网站时调用。你想要的是绑定到pageshow事件。前任。

  $('#FormPage').live('pageshow', function () {
      if ($('#Scope').val() == "Yellow" || $('#Scope').val() == "Red") {
          showComments("ScopeComment");
      }
      if ($('#Schedule').val() == ("Yellow") || $('#Schedule').val() == "Red") {
          showComments("ScheduleComment");
      }
      if ($('#Financial').val() == "Yellow" || $('#Financial').val() == "Red") {
          showComments("FinancialComment");
      }
      if ($('#Resource').val() == "Yellow" || $('#Resource').val() == "Red") {
          showComments("ResourceComment");
      }
      if ($('#Risk').val() == "Yellow" || $('#Risk').val() == "Red") {
          showComments("RiskComment");
      }
      alert("hello"); -------> At this point I see the alert and behind it all correct text areas are shows, but right after I press "OK" Ajax re-displays the page and my comments all hide
 });