HTML onload无法正常工作

时间:2014-08-26 23:52:52

标签: javascript jquery html

我试图使用html onload事件来触发javascript,但是无法正常工作。原始代码是:

HTML:

<div id='map' onload="generateMap.createMap();"></div>

JS:

var generateMap = function(){
return{
    createMap: function(){
        console.log(this.attr('id'));
        element = this.attr('id');
        navigator.geolocation.getCurrentPosition(initialize);
    }
};

}

为了尝试测试,我将html更改为:

<div id='map' onload="alert('test');"></div>

有谁能告诉我为什么没有什么工作?

4 个答案:

答案 0 :(得分:5)

首先,onload属性对div标记无效。您很可能打算将onload放在body标记中。

不幸的是,这不是唯一的问题。

在您的onLoad引用generateMap,就好像它是方法createMap的对象一样。然而,这种情况并非如此。您已将generateMap分配给匿名函数。

要使代码正常运行,generateMap必须是方法createMap的对象。

您只需要将其设置为对象:

var generateMap = {
    createMap: function(){
        console.log(this.attr('id'));
        element = this.attr('id');
        navigator.geolocation.getCurrentPosition(initialize);
    }
};

如果您因任何原因需要保留匿名函数,可以使用立即执行的函数:

var generateMap = (function(){
    return {
        createMap: function(){
            console.log(this.attr('id'));
            element = this.attr('id');
            navigator.geolocation.getCurrentPosition(initialize);
    }
})();

答案 1 :(得分:0)

如果你正在使用jQuery,那么我喜欢以下功能,它为所有标签添加了onload功能:

$(document).ready (function () {
    jQuery.each ($("[onload]"), function (index, item) {
        $(item).prop ("onload").call (item);
        return false;
    });
});

答案 2 :(得分:-1)

div有没有 onload 事件。您可以在div标记之后使用脚本标记来模拟onload行为。

使用此

<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        var generateMap = {
            createMap: function(element) {
                navigator.geolocation.getCurrentPosition(initialize);
            }
        };
    </script>
</head>

<body>
    <div id='map'></div>
    <script type="text/javascript">
        generateMap.createMap('map');
    </script>
</body>

答案 3 :(得分:-1)

假设Chrome .. div标记没有onload个事件。检查以下两个jsfiddles:

不起作用: http://jsfiddle.net/o81e4dkr/

使用: http://jsfiddle.net/p3osqrdn/

我不知道在加载div时触发事件的方法,除非它是通过jQuery.load()加载的,在这种情况下你可以使用回调。