Web アプリケーションで Google Maps Javascript API を使用しています。ユーザーがマップ上にマーカー/オーバーレイを描画するたびに、現在開いているフォームを表示するカスタム ツールチップ。jQuery を使用してフォームの 1 つをインタラクティブにしたいと考えています。具体的には、フォームの上部にあるラジオ ボタンの選択に応じて、さまざまなフォーム フィールドを表示したいと考えています。ただし、私の jQuery .change() ハンドラーは起動していないようです。
ツールチップを追加するコードは次のようになります。
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
var radius = circle.getRadius();
var center = circle.getCenter();
var circleForm = "<%= escape_javascript(haml(:tooltip_form)) %>";
var circleInfoWindow = new google.maps.InfoWindow({
content: circleForm
});
circleInfoWindow.setPosition(circle.getCenter());
circleInfoWindow.open(map);
問題のラジオ ボタンは tooltip_form.haml にあり、「group1」という名前が付けられています。同じ $(document).ready() ブロックの下部に、次のような jQuery コードがあります。
$("input[name='group1']").change(function() {
alert("Changed"); // sample code
});
ただし、ツールチップが表示され、ラジオ ボタンの選択を変更すると、ハンドラーが起動しません。「group1」という名前のラジオ ボタンをページ自体に追加すると、ハンドラーが起動しますが、円が描画された後に表示されるツールチップにある場合、ハンドラーは起動しません。誰でもこの問題を解決できますか?