Infowindow Button jQueryイベント

infoWindow divの編集、共有または削除をクリックしたときに呼び出されるjQuery関数の実行に問題があります。Infowindow Button jQueryイベント

var markers = []; 
for(i=0; i<array.length; ++i) { 
    var marker = new google.maps.Marker({ 
    position: {lat: parseFloat(array[i]['latitude']), lng: parseFloat(array[i]['longitude'])}, 
    map: map 
    }); 

    var id = array[i]['id']; 
    var edit = 'edit', share = 'share', del = 'delete'; 
    var cString = '<div style="margin: auto; text-align: center; font-family: Tahoma, Geneva, sans-serif;"><strong>Location Name: </strong>' + array[i]['title'] 
    + '<br><strong>Location Description: </strong>' + array[i]['description'] 
    + '<br><br><br><div class="btn-group"><button type="button" class="btn btn-primary '+edit+'" id="' + id + '">Edit</button><button type="button" class="btn btn-primary '+share+'" id="' + id + '">Share</button><button type="button" class="btn btn-primary '+del+'" id="' + id + '">Delete</button></div>'; 

    contentString.push(cString); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infoWindow.setContent(contentString[i]); 
     infoWindow.open(map, marker); 
    } 
    })(marker, i)); 

    // this is the function 
    $('button').click(function() { 
    console.log('clicked'); 
    }); 

    markers.push(marker); 
}

はinfoWindowに割り当てられたボタンのクリックは表示されませんが、等サインアウト、ビュー・プロファイルのような他のボタンに

アレイは、構造を有するたJSONアレイであるん

を

[ 
    { 
    id:"1" 
    description:"I am Loving It! ↵McArabia Combo Meal: 520 Rs/-" 
    latitude:"25.28919345" 
    longitude:"67.11113134" 
    title:"McDonalds" 
    type:"favourite" 
    },//.... 
    //...... 
]

どうすればこの問題を解決できますか？

出典

2016-12-08 Danyal Imran

これらの動的にボタンが追加されます。イベントをボタンにバインドするには、jquery [.on（）]（http://api.jquery.com/on/）を使用します。 forループ内にイベントバインディングを配置する必要はありません。 – anu

さらに@anuコメント：

infoWindowあなたがボタンにclickをバインドするときに、関数infoWindow.open(map, marker);でそう、infoWindowのボタンが含まれていない場合にのみ、DOMに追加されているためです。

そしてライブ例：

$(document).on('click', '.info-button', function(){ 
 
    alert('button clicked'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Info windows</title> 
 
    <style> 
 
     /* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <script> 
 

 
     // This example displays a marker at the center of Australia. 
 
     // When the user clicks the marker, an info window opens. 
 

 
     function initMap() { 
 
     var uluru = {lat: -25.363, lng: 131.044}; 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 4, 
 
      center: uluru 
 
     }); 
 

 
     var contentString = '<div id="content">'+ 
 
      '<button class="info-button">Click on it</button>' + 
 
      '</div>'; 
 

 
     var infowindow = new google.maps.InfoWindow({ 
 
      content: contentString 
 
     }); 
 

 
     var marker = new google.maps.Marker({ 
 
      position: uluru, 
 
      map: map, 
 
      title: 'Uluru (Ayers Rock)' 
 
     }); 
 
     marker.addListener('click', function() { 
 
      infowindow.open(map, marker); 
 
     }); 
 
     } 
 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

出典

2016-12-08 12:37:10

魅力のように働いた、ありがとうbro：' D –

私の喜び;）幸運.. –

ページがロードされた後で、これらのボタンを動的に追加しています。 .on()機能を使用してボタンにclickイベントをアタッチする必要があります。

$(document).on("click", "button", function() { 
    console.log('clicked'); 
});

このイベントバインディングをforループ内に追加しないでください。これを文書の中に入れてください。これは基本情報のためのものです。on()についてはthis linkを、適切なセレクター/コンテナの使用方法については、こちらをご覧ください。

出典

2016-12-08 12:36:07 anu

ありがとう、魅力的なように働いた： 'D –

Infowindow Button jQueryイベント

答えて

関連する問題