Переписывать обработчики событий Javascript?

Question

Я пытаюсь добавить правителей на карту google и получить их.

Все работает хорошо, но обработчик событий «Удалить правителя», похоже, не работает правильно. (См функцию «AddLine»)

// Set up the event handler for the remove ruler button 
document.getElementById('delruler' + num).onclick = function() {removeLine(num); return false;} 

Что в итоге происходит то, что я могу удалить последнюю линейку я добавил, но не любой из них перед ним. Я могу войти в консоль и набрать removeLine(3) и удалить строку # 3, так что я уверен, что все остальное работает ... Это только обработчики событий, которые переписываются или что-то еще?

Это должно быть настройка обработчиков событий для разделов, называемых «delruler1», «delruler2» и т. Д. Что я получил неправильно? Полный код приведен ниже. Спасибо за помощь.

var lines = new Array(); 

function addruler() { 
var ruler1 = new google.maps.Marker({ 
    position: map.getCenter() , 
    map: map, 
    draggable: true 
}); 
var ruler2 = new google.maps.Marker({ 
    position: map.getCenter() , 
    map: map, 
    draggable: true 
}); 
var ruler1label = new Label({ map: map }); 
var ruler2label = new Label({ map: map }); 
ruler1label.bindTo('position', ruler1, 'position'); 
ruler2label.bindTo('position', ruler2, 'position'); 
var rulerpoly = new google.maps.Polyline({ 
    path: [ruler1.position, ruler2.position] , 
    strokeColor: "#0098b5", 
    strokeOpacity: .7, 
    strokeWeight: 7 
}); 
rulerpoly.setMap(map); 
ruler1label.set('text',distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng())); 
ruler2label.set('text',distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng())); 
google.maps.event.addListener(ruler1, 'drag', function() { 
    rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]); 
    ruler1label.set('text',distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng())); 
    ruler2label.set('text',distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng())); 
}); 
google.maps.event.addListener(ruler2, 'drag', function() { 
    rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]); 
    ruler1label.set('text',distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng())); 
    ruler2label.set('text',distance(ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng())); 
}); 
// Add our new ruler to an array for later reference 
lines.push([ruler1, ruler2, ruler1label, ruler2label, rulerpoly]); 
addLine(lines.length - 1); 
} 

function addLine (num) { 
// This function adds a line to our page. 
var div = document.getElementById('latlon'); 
var oldHTML = document.getElementById('latlon').innerHTML; 
div.innerHTML = oldHTML + "<div id='ruler" + num + "'><span id='latlon_dir'><input type='text' name='dir' id='dir' length='2' /></span><span id='latlon_street'><input type='text' name='street' id='street' length='30' /></span><span id='latlon_traffic'><input type='text' name='traffic' id='traffic' length='6' /></span><span id='latlon_speed'><input type='text' name='speed' id='speed' length='2' /></span><span id='latlon_stop'><select name='stop' id='stop'><option value='Y'>Yes</option><option value='N'>No</option></select> </span><span id='latlon_viewdistance'><input type='text' name='viewingdistance' id='viewingdistance' length='10' /></span><span><button type='button' class='delruler' id='delruler" + num + "' >Delete Ruler</button></span><br>"; 
// Set up the event handler for the remove ruler button 
document.getElementById('delruler' + num).onclick = function() {removeLine(num); return;} 
} 

function removeLine (num) { 
// Removes the line from our HTML page 
var div = document.getElementById('ruler' + num); 
div.parentNode.removeChild(div); 
removeRuler(lines[num]); 
} 

function removeRuler (r) { 
// Now we remove the ruler. 
// I've unpacked the variables for readability. 
var ruler1=r[0]; var ruler2=r[1]; var ruler1label=r[2]; var ruler2label=r[3]; var rulerpoly=r[4]; 
google.maps.event.clearListeners(ruler1, 'drag'); 
ruler1.setMap(null); 
google.maps.event.clearListeners(ruler2, 'drag'); 
ruler2.setMap(null); 
ruler1label.setMap(null); 
ruler2label.setMap(null); 
rulerpoly.setMap(null); 
} 

function distance(lat1,lon1,lat2,lon2) { 
var R = 3959; // Here's the right settings for miles and feet 
var dLat = (lat2-lat1) * Math.PI/180; 
var dLon = (lon2-lon1) * Math.PI/180; 
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
    Math.cos(lat1 * Math.PI/180) * Math.cos(lat2 * Math.PI/180) * 
    Math.sin(dLon/2) * Math.sin(dLon/2); 
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
var d = R * c; 
if (d>1) return Math.round(d)+"mi"; 
else if (d<=1) return Math.round(d*5280)+"ft"; 
return d; 
} 

Answer 1

Javascript будет перезапись обработчиков событий, document.getElementById(...) возвращает объект с несколькими переменными в нем. Вы можете доказать это, выполнив следующий код в консоли разработчика браузера:

$.each(document.getElementById("comments-link-16801451"), function(key, data) { console.log(key + ' - ' + data); }); 

На этой странице, которая возвращает это:

Теперь вернемся к вашему вопросу, в onclick свойство из объекта, который getElementById возвращается это просто переменная с анонимной функцией, поскольку это значение. Это может быть доказано, запустив это в консоли разработчика:

document.getElementById("comments-link-16801451").onclick = function() { console.log("test"); }; 
document.getElementById("comments-link-16801451").onclick(); 

EDIT: Я читаю ваш вопрос неправильно. В вашей функции removeLine, document.getElementById('ruler' + num); должно быть document.getElementById('delruler' + num);. Я просто оставлю все, что есть там, для будущей справки для любого, кто спотыкается здесь.