jQuery / kill Instance when not needed anymore

Question

got the following Problem width jQuery: On one site ary many div Containers with the same class called "stackgo" but with different data-attaches. Example:

<div class=\"stackgo\" data-an=\"HEY\" data-ms=\"HO\" data-me=\"HM\"></div>

I wrote some jQuery-Code to apply a Post-Massage to a PHP-File, the Mouse pointer shall change when hovering above the div-container, and send the Post-Massage when clicking on it:

$('div.stackgo').hover(function() {
  document.body.style.cursor = "pointer";
    $('div.stackgo').on('click', function() {
      var stackgo = $(this);
      var an = stackgo.data('an');
      var ms = stackgo.data('ms');
      var me = stackgo.data('me');

          if (an != '') {
            $.post('../../AJAX/schreibmaterialnei.php', {an: an, ms: ms, me: me}, function(data) {
            });
          }

      stackgo.html('');
      stackgo.html('<img src="../../img/OK_Sign.png">');
      stackgo.show("pulsate",500);
      alert (an + " - " + ms + " - " + me);
    });
}, function() {
  document.body.style.cursor = "default";
});

Sorry for the nasty written and formated Code, these are my first steps :(

Now the following Problem: At the first time on clicking on the Div-Container, everything went well. But after clicking on the second Div-Container, everything inside of the Click function will be executed two times. The more Container i click, the more "Click"-Function will be executed. (Can be seen on the mass of Alert-Windows and entrys in the Database (managed by the schreibmaterialnei.php). Not with old values, always with the new ones, just as much as i total clicked on.

Seems like it goes through every instance this class "stackgo" has made during the clicking procedure.

How can i control this? I got absolutly no idea :(

I would be very grateful for any help

Just change $('div.stackgo').on('click', function() { TO $(this).on('click', function() {. It may work — Nouman Arshad, Apr 07 '15 at 19:26

score 1 · Answer 1 · answered Apr 07 '15 at 19:31

1

I think whenever you hover, you are binding another "click" to your div.stackgo. I bet you'll find even without clicking, if you just mouseover/mouseout a few times, then click, you'll see the same effect.

The solution is to check that there are any clicks bound already, and in that case return false before you bind the click event or to move the "click" binding outside of the hovering altogether.

answered Apr 07 '15 at 19:31

dmgig

4,400
5
36
47

thats a great Point! I didnt mentioned that of that point of view! Thanks to you and BSimpson for the great help! – Benny H. Apr 08 '15 at 19:00

score 0 · Accepted Answer · answered Apr 07 '15 at 20:40

dgig is correct. Each time you mouse over the element, you are binding another event to each $('div.stackgo').

If you refactor your code slighty to:

    $('div.stackgo').on('click', function() {
          var stackgo = $(this);
          var an = stackgo.data('an');
          var ms = stackgo.data('ms');
          var me = stackgo.data('me');

              if (an != '') {
                $.post('../../AJAX/schreibmaterialnei.php', {an: an, ms: ms, me: me}, function(data) {
                });
              }

          stackgo.html('');
          stackgo.html('<img src="../../img/OK_Sign.png">');
          stackgo.show("pulsate",500);
          alert (an + " - " + ms + " - " + me);
    });
    $('div.stackgo').hover(function() {
        document.body.style.cursor = "pointer";
    });

Should give you the results you're wanting. FYI, You will need to insure that the div tags are loaded before running this script.

jQuery / kill Instance when not needed anymore

2 Answers2