訪問$（document）.ready（）內部和外部的元素

Question

我需要訪問$( document ).ready()范圍內部和外部的元素。

假設以下代碼：

var text__holder = $('#text__holder');

$(function() {
    text__holder.text('Inside DOM ready');
    /*
      SOME MORE ACTION WITH ELEMENT
    */
});

var writeSomeTxt = function () {
    text__holder.text('Outside DOM ready');
};

writeSomeTxt();

在這種情況下，我無法訪問函數內部的元素。 該JS也位於外部.js文件中，該文件包含在頁面的<head>部分中，我無法在其他地方替換它。

我目前的“解決方法”是：

var text__holder = $('#text__holder');

$(function() {
    text__holder.text('Inside DOM ready');
    /*
      SOME MORE ACTION WITH ELEMENT
    */
});

var writeSomeTxt = function () {
 $(function() {
    text__holder.text('Outside DOM ready');
 });
};

writeSomeTxt();

Answer 1

問題可能是您不能僅使用以下代碼行：

var text__holder = $('#text__holder');

直到已加載DOM。 如果這樣做，您只會得到一個空的jQuery對象，因為它將找不到任何匹配的DOM對象。

如果您知道在加載DOM之后才會調用writeSomeTxt() ，則可以這樣做：

var text__holder;

$(function() {
     text__holder = $('#text__holder');
     text__holder.text('Inside DOM ready');
    /*
      SOME MORE ACTION WITH ELEMENT
    */
});

var writeSomeTxt = function () {
    text__holder.text('Outside DOM ready');
};

// don't call this until after the DOM is loaded
// presumably based on some DOM event
writeSomeTxt();

但是，實際上，無論如何都試圖緩存單個DOM引用毫無意義，因此編寫代碼的更好方法是：

$(function() {
    $('#text__holder').text('Inside DOM ready');
    /*
      SOME MORE ACTION WITH ELEMENT
    */
});

var writeSomeTxt = function () {
    $('#text__holder').text('Outside DOM ready');
};

// don't call this until after the DOM is loaded
// presumably based on some DOM event
writeSomeTxt();

或者，如果所有這些代碼都應該在頁面初始化時運行，則只需將其全部放入.ready()處理函數中。

$(function() {
     var text__holder = $('#text__holder');
     text__holder.text('Inside DOM ready');
    /*
      SOME MORE ACTION WITH ELEMENT
    */

    var writeSomeTxt = function () {
        text__holder.text('end of DOM ready');
    };

    writeSomeTxt();

});

Answer 2

您可以在document.ready外部聲明函數和變量，並在定義變量之后在內部定義變量和調用函數：

var text__holder;//declare undefined varible

$(function() {

    text__holder = $('#text__holder');// can now define varible
    text__holder.text('Inside DOM ready');        
    // call function now that variable is defined
    writeSomeTxt();
});

var writeSomeTxt = function () {
    text__holder.text('Outside DOM ready'); 
};

訪問$（document）.ready（）內部和外部的元素

問題描述

2 個解決方案

解決方案1
4 已采納 2016-03-07 19:58:19

解決方案2
2 2016-03-07 20:07:22

訪問$（document）.ready（）內部和外部的元素

問題描述

2 個解決方案

解決方案1 4 已采納 2016-03-07 19:58:19

解決方案2 2 2016-03-07 20:07:22

解決方案1
4 已采納 2016-03-07 19:58:19

解決方案2
2 2016-03-07 20:07:22