私はここで似ているが同じではないことを尋ねました（そしてそれはすでに答えられています）。今、私はいくつかのフォローアップの質問があります、そして私は新たに尋ねたほうがよいと思います（私は規則を読みました、そして私は何も破らないことを望みます。しかし私がそうするならば親切に私に思い出させてください）。
MySQLテーブルからいくつかの都市のID、名前、および位置をロードしてから、それをHTMLテーブルに入力します。それらの都市を指すマーカーが付いたGoogleマップもあります。
ユーザーがHTML行（trタグ）の1つをクリックしたときに、都市マーカーに情報ウィンドウがポップアップ表示されるようにしたい。私はjQueryなしでPHP、Javascript、およびXMLを使用しています。私はこれまでに達成しました。
今、私はHTMLテーブルをソート可能にしようとしています。したがって、ユーザーがthをクリックすると、クリックされたthに従ってデータが並べ替えられます（ただし、このサンプルでは、IDでのみ並べ替えることができます）。
問題は、少なくとも1回ソートした後、trがクリックされたときに情報ウィンドウがポップアップしなくなることです。
私のHTML：
<?php
$query = "SELECT id, name, lat, lng FROM city ORDER BY id";
$arrCities = mysql_query ($query);
?>
<div id="gmap" style="width: 550px; height: 450px"></div>
<table id="tblData">
<tr>
<th>/* when the th clicked it'll call js function */
<a href="javascript:GetData('sort.php?by=id&val=<? echo $val; ?>', 'tblData');">ID</a>
</th>
<th>City</th>
</tr>
<?php while ($row = mysql_fetch_assoc($arrCities)) { ?>
<tr id="<?php echo $row['id']; ?>">
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
</tr>
<?php } ?>
</table>
マーカーを設定するためのXMLを作成するための私のPHP（my-xml-generator.php）：
<?php
$query = "SELECT id, name, lat, lng FROM city ORDER BY id";
$arrCities = mysql_query ($query);
$dom = new DOMDocument('1.0', 'utf-8');
$node = $dom->createElement ('markers');
$parNode = $dom->appendChild ($node);
header('Content-type: text/xml');
while ($row = mysql_fetch_assoc($arrCities))
{
$node = $dom->createElement ('marker');
$newNode = $parNode->appendChild ($node);
$newNode->setAttribute ('id', $row['id']);
$newNode->setAttribute ('name', $row['name']);
$newNode->setAttribute ('lat', $row['lat']);
$newNode->setAttribute ('lng', $row['lng']);
}
echo $dom->saveXML();
?>
私のGoogleマップJavascript：
var gmap = new google.maps.Map (mapDiv, options);
var arrMarkers = [];
var infoWindow = new google.maps.InfoWindow;
// add markers to the map
DownloadUrl ("my-xml-generator.php", function(data)
{
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName ("marker");
for (var i = 0; i < markers.length; i++)
{
var id = markers[i].getAttribute("id");
var lat = parseFloat (markers[i].getAttribute("lat"));
var lng = parseFloat (markers[i].getAttribute("lng"));
var pos = new google.maps.LatLng (lat, lng);
var markerOptions =
{
position : pos,
map : gmap,
draggable : false
};
// add the marker
var marker = new google.maps.Marker (markerOptions);
arrMarkers.push(marker);
// assign onclick event for each tr
// this is the part that I have to somehow re-run after the sorting is done
var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click",
(function(i) {
var row = i;
return function() {
RowClick (row);
}
})(i)
);
// add info window
var html = '<div>' + id + '</div>';
BindInfoWindow (marker, gmap, infoWindow, html);
}
});
function BindInfoWindow (marker, map, infoWindow, html)
{
google.maps.event.addListener (marker, "click", function()
{
infoWindow.setContent (html);
infoWindow.open (map, marker);
});
}
function RowClick (i)
{
google.maps.event.trigger (arrMarkers[i], "click");
}
function DownloadUrl (url, callback)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
xhr.onreadystatechange = DoNothing;
callback(xhr, xhr.status);
}
};
xhr.open ('GET', url, true);
xhr.send (null);
}
function DoNothing() {}
私のGetData（）関数（単純で通常の関数）：
function GetData (dataSource, divID)
{
var xhr = new XMLHttpRequest();
xhr.open ("GET", dataSource);
xhr.onreadystatechange = function()
{
if (xhr.readyState === 4)
{
var targetDiv = document.getElementById (divID);
targetDiv.innerHTML = xhr.responseText;
}
}
xhr.send (null);
}
私のsort.php（私の並べ替え方法は、クエリを再度実行して目的の並べ替え結果を取得し、tr行をテーブルのinnerHTMLに出力することです）：
<?php
$by = $_GET['by'];
$val = $_GET['val'];
$query = "SELECT id, name, lat, lng FROM city ORDER BY $by $val";
$arrCities = mysql_query ($query);
// set the new order value
$val == 'ASC' ? 'DESC' : 'ASC';
?>
<tr>
<th>
<a href="javascript:GetData('sort.php?by=id&val=<? echo $val; ?>', 'tblData');">ID</a>
</th>
<th>City</th>
</tr>
<?php while ($row = mysql_fetch_assoc($arrCities)) { ?>
<tr id="<?php echo $row['id']; ?>">
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
</tr>
<?php } ?>
</table>
trをクリックすると、そのtrに含まれる都市の情報ウィンドウが正しくポップアップ表示されます。そして、並べ替えも機能します
しかし、それが一度ソートされた後、trのクリックイベントは明らかになくなっています。並べ替えた後、どうすれば再割り当てできますか？