saywow saywow - 6 months ago 14
Javascript Question

why is ajax request sent multiple time when I modify the html/js from the browser

I'm encountering a very weird problem, first here's my code :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<a href="#" onclick="supprimerMembre('1')">Supprimer</a>

<script>
function supprimerMembre(id) {
$.post({
url: 'whateverlink.com',
data: 'id='+id,
success: function(data) {
}
});
}
</script>
</body>
</html>


So if I open the page and click the link "supprimer" everything works great, but once I modify manually the id passed to "supprimerMembre" some real weird thing happens, the request is sent twice once with the new id and another with the old id, and if I modify again, their will be three requests ! and so on (as many time I modify the id as many requests are sent) any one can help me please, this this is driving me crazy!

Answer

After testing the following code in Chrome 50, IE11, Edge, and Firefox 46.0.1, it seems that this is implementation dependent and (at this time) only appearing in Chrome 50.

function myFunction(id) {
  console.log(id);
}
<a href="#" onclick="myFunction(1)">Click Me</a>

There's no guaranteed behavior about modifying the DOM from the developer tools so it's completely up to the people behind the tools as to how they handle this. In the case of Chrome, it seems they add a new event handler to the given event. Similar to doing this:

element.addEventListener('click', function() {
  return supprimerMembre('8456');
});
Comments