當DOM可見時執行jQuery函數

我有一個頁面，其中包含一些自定義驗證，它在驗證摘要中顯示結果。我希望將此驗證摘要重新定位到頁面的底部，而不會導致頁面隨驗證摘要的長度一起滾動。我有一個很好的jQuery函數，但是，我需要在顯示驗證摘要後執行這個jQuery，並且我不確定要觸發哪個事件。當DOM可見時執行jQuery函數

$(document).ready(function(){ 
$("#<%= vsmSummary.ClientID %>").change(function(){ 
    var newTop = $(window).height() - $("#vsmSummary").height(); 
    var newLeft = ($(window).width() - $("#vsmSummary").width())/2; 

     $("#vsmSummary").css(
      { 
       'position': 'absolute', 
       'left': newLeft, 
       'top': newTop 
      } 
     ); 
    }); 
});

在我的自定義的驗證方法，我建立這個字符串，並與RadScriptManager註冊...

Dim scriptText As String = "$(document).ready(function(){ " + _ 
          "$(""#<%= vsmSummary.ClientID %>"").ready(function(){" + _ 
           "var newTop = $(window).height() - $(""#vsmSummary"").height();" + _ 
           "var newLeft = ($(window).width() - $(""#vsmSummary"").width())/2;" + _ 
            "$(""#vsmSummary"").css(" + _ 
            "{" + _ 
              "'position': 'absolute'," + _ 
              "'left': newLeft," + _ 
              "'top': newTop" + _ 
            "}" + _ 
            ");" + _ 
           "});" + _ 
          "});" 


RadScriptManager.RegisterClientScriptBlock(Me.upSCPPage, Me.upSCPPage.GetType(), "DynamicVSM", scriptText, True)

這個作品！感謝學習經驗，我不知道我可以從我的代碼後面調用這個！我將來會做得更多！

來源

2010-12-17 Tgibson

你能解釋多一點你想做什麼，我沒有完全理解你的意思是什麼時候'DOM可見' – JOBG 2010-12-17 18:31:31

驗證信息並不總是可見的。它只有在驗證失敗時纔可見。當消息可見時，我需要應用這些樣式。 – Tgibson 2010-12-17 18:40:16

如果我明白你想重新定位一個包含你的驗證總結出現的元素，那麼AFAIK jQuery不會提供任何事件來檢測innerHtml的變化。

我的建議是將它移到一個函數中，並根據需要從驗證代碼中調用它。

//in your validation code 
$("#vsmSummary").html('Your Validation Message Here'); 
Reposition(); 

//in a separate function 
function Reposition() 
{ 
var newTop = $(window).height() - $("#vsmSummary").height(); 
    var newLeft = ($(window).width() - $("#vsmSummary").width())/2; 

     $("#vsmSummary").css(
      { 
       'position': 'absolute', 
       'left': newLeft, 
       'top': newTop 
      } 
     ); 
}

如果你想更乾淨，你甚至可以創建一個jQuery函數：

jQuery.fn.reposition = function() { 
var newTop = $(window).height() - $(this).height(); 
var newLeft = ($(window).width() - $(this).width())/2; 

      $(this).css(
       { 
        'position': 'absolute', 
        'left': newLeft, 
        'top': newTop 
       } 
      ); 
}

，然後調用它像這樣：

$("#vsmSummary").html('Your Validation Message Here').reposition();

注意：您可以innerHTML.length檢查和setInterval()，但它是一個矯枉過正的解決方案。

來源

2010-12-17 18:55:30 JOBG

我可以在哪裏調用？從.aspx頁面背後的代碼？ – Tgibson 2010-12-17 20:26:38

你可以發佈一些實際的html代碼，什麼時候你想改變'vsmSummary'的CSS。因爲如果你正在做一個完整的帖子來在服務器端進行驗證，那麼爲什麼不在服務器上設置該CSS。 – JOBG 2010-12-17 20:37:34

我這樣解決了它 – Tgibson 2010-12-17 21:33:06

試試這個：

#vsmSummary { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    height: 25px; 
}

有這種風格應用了所有的時間，而不是僅在驗證摘要節目。它應該修復你的div到頁面底部。

來源

2010-12-17 19:00:46

這擴展了頁面（創建了一個滾動效果） – Tgibson 2010-12-17 20:27:56

當DOM可見時執行jQuery函數

回答

相關問題