Question

I have problem with add new row to the table.
I use Google Maps, i want to add to table some information (from google databese, address and name) about point inserted on the map.
(user click point and next ballon show button “Add information”, I want to display this information to the table after clicked button.

<table style="width: 100%" id="myTable">
   <tr><td>Row 1</td></tr>
   <tr><td>Row 2</td></tr>
   <tr><td>Row 3</td></tr>
</table>
<a href="#" name="addRow">Add Row</a>

Function “addRow”:

$("a[name=addRow]").click(function() {
            $("table#myTable tr:last").after('<tr><td>HERE INFORMATION POINT</td></tr>');
            return false;
    });

Function from which display ballon for points:

google.maps.event.addListener(marker, 'click', function() {

       geocoder = new google.maps.Geocoder();
       geocoder.geocode({'latLng': placeLoc}, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
        addressLoc = results[0].formatted_address;
         contentString = '<h3>place.name+'</h3>'+addressLoc+'<br/><br/><a href="#" name="addRow">Add Information</a>';

         }
       });

Everything works fine but not with Google Maps.

Answer 1

You need to use the .live() method since your adding the ‘Add Information’ element dynamically. Your a element <a href="#" name="addRow"> wont have a click event when added since .click() binds events just once when called, all future elements wont have the event.

Description for live(): Attach an event handler for all elements which match the current selector, now and in the future.

$("a[name=addRow]").live('click', function() {
    $("table#myTable tr:last").after('<tr><td>HERE INFORMATION POINT</td></tr>');
    return false;
});