javascript - 在 InfoWindow 内容中单击

Question

我的代码出现了一个小问题，我尝试在 JavaScript 的信息窗口的内容中启动一个函数，但我不知道为什么，我很难做到这一点。我在 stackoverflow 和其他地方查看了很多关于它的主题，完全应用了我在这些主题上看到的内容，但是......

注意:这是我整个代码的一部分，这就是为什么“infobulle”似乎没有被声明的原因。 同理，“this.jsonActivity”和“mapView”在这部分代码之前被正确初始化。

这里，参数中的“newActivity”是一个来自谷歌地图 API 的标记，我想要做的是在我们点击它时在当前标记旁边显示一个信息窗口。一切正常，整个文本在 InfoWindow 中正确显示，但问题是当我单击按钮时无法调用“alertMessage()”方法，没有任何反应......我真的不知道为什么! !

好吧，这是我的代码，谢谢你的帮助:)

google.maps.event.addListener(newActivity, "click", function() {
    if(infobulle)
        infobulle.close();

    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button onclick="alertMessage()">Click me</button>';

    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);

    function alertMessage() {
        alert("alertMessage");
    }
});

编辑:

太棒了，现在可以用了!

我已经尝试了您所有的解决方案，但只有一个对我有用，即声明函数为全局函数的那个​​，感谢 Dr.Molle!

现在我把我为其他两个解决方案尝试过的内容:

google.maps.event.addListener(newActivity, "click", function() {

    if(infobulle)
        infobulle.close();

    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button id="myAlert">Click me</button>';

    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);

    document.getElementById("myAlert").addEventListener(function() {
        alert("something");
    });
});

Jared Smith 建议的解决方案。就像以前一样，除了按钮之外，其他所有内容都正确显示，当我单击它时，没有任何反应。

对于 Alexander 建议的解决方案:

google.maps.event.addListener(newActivity, "click", function() {

    if(infobulle)
        infobulle.close();

    var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
        this.jsonActivity.description + '<br/>' +
        '<h3>Routing:</h3>' +
        '<button onclick="(function() {
            alert(\"something\");
        })();">Click me</button>';

    infobulle = new google.maps.InfoWindow({
        content: contenu,
        maxWidth: 120
    });
    infobulle.open(mapView, this);
});

而这一次，即使我应该点击按钮的元素也没有出现...

那么对于这两个解决方案，也许我没有正确使用它们......所以如果你有话要说，请继续:)

编辑(2):好的，现在我有另一个问题:如果我想把一个变量作为函数的参数，我应该怎么做呢？仅键入变量名称作为参数是行不通的。

我试过:

var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
    this.jsonActivity.description + '<br/>' +
    '<h3>Routing:</h3>' +
    '<button onclick="alertMessage(\'something\')">Click me</button>';
window.alertMessage = function(thing) {
    alert(thing);
};

这是可行的，因为我直接将字符串作为参数。

但是如果我声明:

var text = "something";

var contenu = '<strong>' + this.jsonActivity.title + '</strong><br/>' +
    this.jsonActivity.description + '<br/>' +
    '<h3>Routing:</h3>' +
    '<button onclick="alertMessage(text)">Click me</button>';
window.alertMessage = function(thing) {
    alert(thing);
};

它不再工作了，你知道如何解决这个问题吗？

Answer 1

使函数全局可访问(目前不是):

window.alertMessage=function() {
    alert("alertMessage");
}