如何将html文件加载到div元素然后使用该html中的元素

时间:2015-11-13 14:32:16

标签: javascript jquery html load jquery-callback

当我将html文件加载到div元素中然后我尝试使用该html中的元素时我无法找到它们。 我是这样做的:

    var View = (function() {
        var instance = null;
        var IMG_ARROW_UP = "icon_arrow_up.png", IMG_ARROW_DOWN = "icon_arrow_down.png", IMG_ARROW_ACTIVE = "icon_arrow_right_active.png", IMG_ARROW_INACTIVE = "icon_arrow_right_inactive.png";
/**
 * DOM elements
 */
var container, menuArrowUp;
/**
 * DOM attributes
 */
var CONTAINER_ID = "container";

function init() {
    loadView();

    function loadView() {
        if (!DomHelper.nodeIsExist(CONTAINER_ID)) {
            DomHelper.createDivNode(document.body,
                    CONTAINER_ID, "");
            $("#" + CONTAINER_ID).load(
                    Properties.getParameter("template",
                            "VIEW_MARKUP"), function() {
                        initializeDomElements();
                        Manager.handleVisibility(CONTAINER_ID, false);
                    });

}         }

    function initializeDomElements() {
        container = DomHelper
                .getByElementId(CONTAINER_ID);
        menuArrowUp = DomHelper
                .getByElementId("menuArrowUp");
    }

    function createViewHeader() {
        var headerNode = DomHelper.getByElementId("viewHeading");
        DomHelper.setNodeText(headerNode, getMessage("header"));
    }

    function setupImages() {
        DomHelper.setImageSrc(menuArrowUp, getImageSrc(IMG_ARROW_UP));
    }

    function getImageSrc(imagePath) {
        return DomHelper.getItemImage("IMAGES_PROPERTY", imagePath);
    }

    return {
        onShow : function() {
            Manager.handleVisibility(CONTAINER_ID, true);
            createViewHeader();
            setupImages();
        },

    }

}

return {
    getInstance : function() {
        if (!instance) {
            instance = init();
        }
        return instance;
    }
}

})();

    //
    View.getInstance().onShow();
应该在onShow()函数之前调用

initializeDomElements()函数,但实际上它会在之后调用。

1 个答案:

答案 0 :(得分:0)

使用jQuery加载HTML。

$('#yourElement').load('page.html', function() {
  /* When load is done */
}