2

次のコードを見て、Google マップ カスタム コントロールをプッシュして jquery .click() 関数を呼び出すことができない理由を教えてください。これは、マップ要素を作成し、クラス (.test) を割り当てる部分です。

var controlDiv = document.createElement('div');
var controlButton = document.createElement('button');
controlButton.setAttribute("class", "btn btn-mini btn-success test");
controlButton.innerHTML = 'Control Button';

controlDiv.appendChild(controlButton);

// Add 'div' containing button to the map
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);

$('.test').click(function () {
    alert("Handler for");
});

マップ UI から動作するコードを既にテストしていますが、マップ カスタム コントロール形式では動作しません!

4

2 に答える 2

3

マップがアイドル状態になる (レンダリングが終了する) まで待つと、ボタンは DOM の一部になり、jquery セレクターが機能します。

var controlDiv = document.createElement('div');
var controlButton = document.createElement('button');
controlButton.setAttribute("class", "btn btn-mini btn-success test");
controlButton.innerHTML = 'Control Button';

controlDiv.appendChild(controlButton);

// Add 'div' containing button to the map
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);

google.maps.event.addListenerOnce(map, 'idle', function() {$('.test').click(function () {
      alert("Handler for");
    });
});

実施例

于 2013-06-12T05:55:13.953 に答える
2

イベント委任をお勧めします。この種の問題を簡単にします。この Maps API の問題だけでなく、Ajax 呼び出しで読み込まれたコンテンツなど、まだ作成されていない DOM 要素のイベントに応答する必要があるあらゆる状況で使用できます。

<div>マップ コンテナにidofがあると仮定しますmap_div。

次に、このコードがある場所:

$('.test').click(function () {
    alert("Handler for");
});

次のように変更します。

$('#map_div').on( 'click', '.test', function () {
    alert("Handler for");
});

仕組み: イベント ハンドラーをまだ作成されていない.test要素にアタッチする代わりに、既に存在しているはずのマップ コンテナーにアタッチしますが、イベント ハンドラー関数は、作成された要素のクリックにのみ応答します.test。

上記のコードは jQuery 1.7+ 用です。1.4.2+ の場合は次のようになります。

$('#map_div').delegate( '.test', 'click', function () {
    alert("Handler for");
});
于 2013-06-12T07:13:54.473 に答える