Question

我有一个单页网站：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
    <link type="text/css" rel="stylesheet" href="stylesheet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
</head>

<body>
    <h1>Hello World</h1>
    <p>I'm hosted with GitHub Pages.</p>
    <div id="map"></div>
    <FORM>
        <INPUT id="but" Type="BUTTON" Value="About Me" />
    </FORM>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src=script.js></script>
</body>

</html>

我想在按钮#but中添加一些处理程序，并尝试使用script.js中的脚本：

var mapClicked = function() {
    alert("Map!");
    // create a map in the "map" div, set the view to a given place and zoom
    //var map = L.map('map').setView([55.432, 37.654], 13);
}

$(document).ready(function() {
    $('#but').click(mapClicked());
});

但是我在浏览器中运行这个html并点击按钮，没有任何反应。

Answer 1

通过名称引用函数时，将()添加到函数名称。这将直接调用该函数，返回的值将被指定为click事件的回调。通过删除函数名的()（或更确切地说函数调用），可以正确引用该函数，并在元素上发生click事件时调用该函数。

更改

$('#but').click(mapClicked());

到

$('#but').click(mapClicked); // <----- Removed ()

无法将jQuery处理程序添加到HTML网站

1 个答案: