1

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!

Mike Cluck
  • 31,869
  • 13
  • 80
  • 91
hereForLearing
  • 1,209
  • 1
  • 15
  • 33

1 Answers1

3

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');
});
Mike Cluck
  • 31,869
  • 13
  • 80
  • 91
  • Thank you for the explaination, isn't there anyway to solve that ? I mean delzting the old eventListener before adding the new one – hereForLearing May 11 '16 at 19:57
  • 1
    @saywow Not without modifying the dev tools. Maybe you should consider setting up your events with [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) then you can write your own debug function that uses [`removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener). Then just call your debug function from the console. – Mike Cluck May 11 '16 at 20:00
  • Ok thank you but I meant something like adding (pseudo code) : (if new handler added on an object) : delete the old one on this object – hereForLearing May 11 '16 at 20:03
  • @saywow You can't really do that very easily. The easiest way is the one I told you. But [it is possible to remove all event handlers.](http://stackoverflow.com/questions/9251837/how-to-remove-all-listeners-in-an-element) – Mike Cluck May 11 '16 at 20:04