-1

問題: Google マップの infoWindow 内のセレクターで jQuery イベントを発生させようとすると、gmap オブジェクト内のイベントをキャッチするために必要なクリック イベント リスナーが他のクリック関数の親である必要があるため、最初のクリックでクリック イベントが発生しません。 .

私が StackOverflow で見つけたすべてのソリューションは、eventListener を追加する方法を示していましたが、最初のクリックの問題で発生しなかったことを説明していませんでした。

以下のソリューションは、jQuery UI マップを使用して infoWindows を開くクリック可能なマーカーを設定し、メイン (親) ページの jQuery イベントの infoWindow 内の要素をターゲットにできるようにする場合に機能します。

このソリューションは、ネストされたクリック関数に起因する典型的な最初の起動の問題を解決します。jQuery イベントは最初のクリックで起動しません。これは、キャッチされるために関数が $('map_canvas').gmap() の addEventListener 内にある必要があるためです。しかしもちろん、それらは別のクリック関数内にネストされるため、2 回目のクリックまで起動しません。

これを達成するためのより標準的かつ/または雄弁な方法は確かにありますが、少し非典型的な構文を必要とすることを除けば、これはすべての問題を解決し、そうでなければ非常に苛立たしい問題に対して非常に迅速で簡単で実行可能なソリューションを作成し、8 を節約します+制作にかかった壁の頭のバッシングの時間。

4

1 に答える 1

0

ソリューション：

$('#map_canvas').gmap() のクリック イベント リスナーをキャッチオールとして使用し、クリックされたオブジェクトのクラス名を判別できるようにする mainevent 関数を使用し、if ステートメントを使用します。 infoWindow 内で使用したい「セレクター」のいずれかと一致するかどうかを確認し、そこから通常の機能を実行します。

便宜上、jQuery(element) は通常の jQuery(this) と同等になるように割り当てられます。

クラスは、クリックされたオブジェクトの複数のクラスを考慮して配列に分割されます。

次に、if ステートメントを使用して、セレクターとして使用したいクラスが、クリックされたオブジェクトのクラス名の配列にあるかどうかを確認し、そうであれば、通常の jQuery に入れます。セレクターのネストされたクリック関数。必要に応じて (this) を (要素) に置き換えるだけです。

これは、クラスの代わりにセレクターとして id を使用するように非常に簡単に適応できます。単純に $(element).attr('class') を $(element).attr('id') に変更します。

サンプルコードは次のとおりです。

jQuery('#map_canvas').gmap().addEventListener('click', function(mainevent) {

    // We cannot directly target elements inside the Google map and infoWindows with jQuery, so here we catch all clicks on the map and then use if statements to see if the clicked element matches any of the selectors we wish to use.

    var element = jQuery(mainevent.target);
    if ( $(element).attr('class') ) { var MainEventClassList = $(element).attr('class').split(' '); }

    // Gets the classes of the clicked element into an array, so we can check for matches with if statements, as an equivalent to typical jQuery class selectors.  We have also made (element) available as a replacement for (this).



    if ( jQuery.inArray( 'SelectorClassName', MainEventClassList ) >= 0 ) {

        mainevent.preventDefault();
        mainevent.stopPropagation();
        var destinationid = jQuery(element).attr('href');
        alert(destinationid);

    }


});
于 2015-06-19T02:43:11.937 に答える