2014-10-11 2 views
0

У меня есть небольшая проблема в моем коде, я пытаюсь запустить функцию в содержимом InfoWindow в javascript, и, я не знаю, почему, мне было трудно это сделать. Я рассмотрел множество тем об этом в stackoverflow и в других местах, применяя то, что я видел по этим темам, но ...onclick in InfoWindow content

Примечание: это часть всего моего кода, вот почему «информация» «Кажется, не объявлено. Точно так же «this.jsonActivity» и «mapView» корректно инициализируются перед этой частью кода.

Здесь параметр «newActivity» является маркером из API карт google, и я пытаюсь отобразить InfoWindow рядом с текущим маркером, когда мы нажимаем на него. Все в порядке, весь текст правильно отображается в 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"); 
    } 
}); 

EDIT:

это прекрасно, это теперь работает!

Я пробовал все ваши решения, и только один работает для меня, тот, который объявляет функцию глобальной, благодаря 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. Как и раньше, все отображается правильно, за исключением кнопки, когда я нажимаю на нее, ничего не происходит.

И для решения предложенной Александром:

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); 
}); 

и на этот раз, даже элементы, где я должен нажать на кнопку не появится ...

Ну для этих двух решения, может быть, я не использовал их правильно ... так что если вы нашли что-то сказать, пожалуйста, идти вперед :)

EDIT (2): Хорошо, теперь у меня есть другой вопрос: если Я хочу поставить var Как параметр функции, как я должен это делать? Просто введите имя переменной в качестве параметра, который не работает.

Я пробовал:

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); 
}; 

Это больше не работает, вы знаете, как это исправить?

ответ

1

сделать функцию глобальным доступным (в настоящее время это не так):

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

Контекст кнопки при нажатии отличается. Таким образом, кнопка не знает, существует ли функция alertMessage.

Попробуйте использовать анонимную функцию как этот

<button onclick="(function() { 
    alert('he'); 
})();">btn</button> 
+0

Вы не должны быть выступаете объявление функции JS в HTML. –

+0

Он уже был объявлен в html. – Alex

+0

Я знаю, но дело в том, чтобы помочь людям лучше писать код, а не трассировать более эффективно в неправильном направлении. –

0

Вместо

"<button onclick='blah'>" 

Вам нужно

"<button id='myAlertButton'>" 

Затем в EventListener обратного вызова после того, как InfoWindow добавляется в DOM

document.getElementById('myAlertButton').addEventListener(function(){ 
    alert('Whatever'); 
});