Databases
StackOverflow2013
Postsdbo
POGoogle Maps addDomListener on div added by jQuery only sees last iteration of loop
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps addDomListener on div added by jQuery only sees last iteration of loop
    primarykey
    data
    text
    <p>I've got the following simple script:</p> <pre><code>var fruits = new Array("apple","orange","lemon"); $("#fruit_canvas").append("Mouse over these fruits:"); for(var i = 0; i &lt; fruits.length; i++) { var fruit = fruits[i]; var html = "&lt;div id='fruit" + i + "'&gt;" + fruit + "&lt;/div&gt;"; var fruitdiv = $(html); $("#fruit_canvas").append(fruitdiv); google.maps.event.addDomListener($(fruitdiv)[0], 'mouseover', function() { $("#result_canvas").append("Mouse over " + fruit); }); google.maps.event.addDomListener($(fruitdiv)[0], 'mouseout', function() { $("#result_canvas").empty(); }); } </code></pre> <p>It loops through a simple array, uses jQuery to make a div out of each element, and appends it to another div. A Google Maps DOM listener is then added to each appended div. That all works fine, but the DOM listener only seems to be aware of the last element of the array, i.e., it always returns "lemon" as the fruit, no matter which appended div you mouseover.</p> <p>To see what I mean, go to <a href="http://www.pinksy.co.uk/maptest.html" rel="nofollow noreferrer">http://www.pinksy.co.uk/maptest.html</a> and hover over each of the divs.</p> <p>I'm sure it's something obvious to do with how I'm passing the DOM element to the DOM listener, but I'm not sure how!</p> <p>I've also tried it without jQuery, but get the same results:</p> <pre><code>document.getElementById('fruit_canvas2').appendChild(document.createTextNode("Mouse over these fruits:")); for(var i = 0; i &lt; fruits.length; i++) { var fruit = fruits[i]; var div = document.createElement('div'); div.innerHTML = fruit; document.getElementById('fruit_canvas2').appendChild(div); google.maps.event.addDomListener(div, 'mouseover', function() { document.getElementById('result_canvas2').appendChild(document.createTextNode("Mouse over " + fruit)); }); google.maps.event.addDomListener(div, 'mouseout', function() { var cell = document.getElementById('result_canvas2'); if(cell.hasChildNodes()) { while(cell.childNodes.length &gt;= 1) { cell.removeChild(cell.firstChild); } } }); } </code></pre> <p>Thanks in advance... </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USpinksy
    1. USpinksy
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGoogle Maps addDomListener on div added by jQuery only sees last iteration of loop
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POGoogle Maps addDomListener on div added by jQuery only sees last iteration of loop
      1. USuser1009143
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload