Geek Answers Handbook

Jquery click handler, called several times when used inside Google Maps InfoBox, but not infoWindow

I have a problem that I just cannot understand. I took an application that uses google maps API version 3. I was not very familiar with this, but I was asked to adapt a few things. One of them entails the creation of custom infoBubbles, and not the use of the default infoWindow, so that we can fine-tune them. I found a class called infoBox that will do just that and follow some examples to get to where I am now. However, my application requires that each overlay (polygon, polyline or marker) has a delete button on the infoBox. The deletion was just fine with the jQuery click event when we used infoWindow by default, but now it’s very strange that I use infoBox. I created a small test file that demonstrates the problem. The bottom line is that when you open infoBox for the first time, the procedure for the uninstall button is performed only once. But as soon as you close the window and open it again (or another), the procedure starts several times. The more times you open infoBoxes, the more time the delete button is re-attached and, in turn, executed. I have things wrapped in a domready listener for infoBox, so that I can change the elements in the window to be specific to the properties of the object I click on. For some reason, domready shoots several times (I thought it would only start once), and my delete click is bound again. Before using the infoBox class for a regular info window, domready is not required to use jQuery to change the name and description, and the click event has never been linked again and again. I completely lost and spent too much time on this. Any help would be greatly appreciated. An example of a test file is as follows:

<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> <script type="text/javascript" src="infobox.js"></script> <script type="text/javascript" src="jquery-1.9.0.min.js"></script> <script type="text/javascript"> //global variables for the info box an for the map var ib = null; var theMap = null; var myOptions = null; var iw = null; function initialize() { //regular google maps setup crap, not important // var secheltLoc = new google.maps.LatLng(49.47216, -123.76307); var myMapOptions = { zoom: 7 ,center: secheltLoc ,mapTypeId: google.maps.MapTypeId.ROADMAP }; theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions); var marker = new google.maps.Marker({ map: theMap, draggable: true, position: new google.maps.LatLng(49.47216, -123.76307), visible: true }); var markertwo = new google.maps.Marker({ map: theMap, draggable: true, position: new google.maps.LatLng(49.47216, -121.76307), visible: true }); //this is how the info box work, create an element and add some styling to it, straight out of the example docs var boxText = document.createElement("div"); boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; //here i am adding the HTML that i would want my infoBox to contain, test crap for now, but the important part is that // in the real site, it will have 2 buttons, one to delete the entity you are working with (polygons, polylines, markers) and one // to open up a new overlay in which you can make edits to information about that entity. Before changing from the default infoWindow // (which is hard to style) to the new infoBox (which can be styled however you like) the deletes worked fine. Over time and trial and // error i have noticed that each time you open up an infoBox, the delete is re-binding and executing multiple times. var infoContent = ''; infoContent += "<div class='info-wrapper'>"; infoContent += "<div class='title-wrapper'><p><strong>This is a great title</strong></p></div>"; infoContent += "<div class='description-wrapper'><p>This is a phenomenal description</p></div>"; infoContent += "<div class='buttons'><p><a class='openLink' href='#'>Open</a></p>"; //<input type='submit' value='Open' />"; infoContent += "<p><a class='deleteLink' href='#'>Delete</a></p></div>"; //close class = info wrapper infoContent += "</div>"; //assign my new variable of html to the inneHTML of main box element boxText.innerHTML = infoContent; iw = new google.maps.InfoWindow({ content: infoContent }); //set the default options for infoBox, basically same as default example myOptions = { content: boxText ,disableAutoPan: false ,maxWidth: 0 ,pixelOffset: new google.maps.Size(-140, 0) ,zIndex: null ,boxStyle: { background: "url('tipbox.gif') no-repeat" ,opacity: 0.75 ,width: "280px" } ,closeBoxMargin: "10px 2px 2px 2px" ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "floatPane" ,enableEventPropagation: false }; //click handlers for the markers google.maps.event.addListener(marker, "click", function (e) { openInfoBox(marker, e, 'this is the new title') }); google.maps.event.addListener(markertwo, "click", function (e) { openInfoBox(markertwo, e, 'great title') }); //the infobox itself ib = new InfoBox(myOptions); } //the open info Box function function openInfoBox(feature, e, text) { //open the damn thing ib.open(theMap, feature); //define a listnener for when the infoBox is ready for jquery to make changes, this is necessary if you want // to alter the values in the box which i will need to do on MLP, setting the title and description values to // the node that is being altered google.maps.event.addListener(ib, 'domready', function() { //chnage the title to hwatever is passed in for demo sake $('.title-wrapper p').html('<strong>'+text+'</strong>'); //$('.description-wrapper p').html('i have change the description'); /******************************************************* HERE IS WHERE THE MAIN PROBLEM LIES THAT IS KILLING ME!!! When this routine runs on MLP, i have a way to know which feature is being deleted, and the index is removed from the array, and the array is reordered. However, for some crazy reason, the more times you open up an infoWindow, the more times this event fires. And if you are say trying to delete index 0 of an array of 4 elements, at times this may run 4 times on a single click which then wipes out all your mapping elemetns instead of just the one you wanted it to delete. NO ME GUSTA! *******************************************************/ $('.deleteLink').click(function(event) { event.preventDefault(); alert('you clicked me'); alert('your tricky'); }); }); } function notify(event) { event.preventDefault(); alert('test'); alert('test12'); } </script> <title>Creating and Using an InfoBox</title> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 400px"></div> <p> This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow. </body> </html>

It might be easier to see a live demo at http://midwestfish.djcase.com/infobox/test.html

+4
source share
1 answer

Try changing this:

$('.deleteLink').click(function(event) {})

in

$('.deleteLink').off('click').on('click', function(event){});

To find out what the problem is and why this should work. openInfoBox () is called every time you click on a point. You can recreate the error by clicking spam on it and then clicking delete. This is because every time you click on a point, it launches this function and attaches the click to the delete button.

To prevent it, first untie it (off) and then drag it (on).

+5
source

More articles:


All Articles