Question

得到以下问题宽度jQuery：在一个网站上有许多div容器，它们具有相同的类别，名为＆＃34; stackgo＆＃34;但是有不同的数据附加。示例：

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

我写了一些jQuery-Code来将后按摩应用到PHP文件中，鼠标指针在悬停在div容器上方时会发生变化，并在点击它时发送后按摩：

$('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";
});

对于令人讨厌的书面和格式化代码感到抱歉，这些是我的第一步:(

现在出现以下问题：在第一次点击Div-Container时，一切都进展顺利。但是在点击第二个Div-Container后，Click函数内部的所有内容都将被执行两次。我点击的容器越多，将执行更多＆＃34; Click＆＃34; -Function。（可以看到大量的Alert-Windows并在数据库中进行管理（由schreibmaterialnei.php管理）。不是旧值，总是使用新值，就像我点击的那样。

似乎它经历了这个班级的所有实例＆＃34; stackgo＆＃34;在点击过程中做了。

我如何控制这个？我绝对不知道:(

我将非常感谢任何帮助

Answer 1

我认为无论何时你徘徊，你都会绑定另一个＆＃34;点击＆＃34;到你的div.stackgo。我打赌你会发现即使没有点击，如果你只是鼠标悬停/鼠标移几次，然后点击，你会看到相同的效果。

解决方法是检查是否已经绑定了任何点击，在这种情况下，在绑定click事件或移动＆＃34; click＆＃34;之前返回false。完全悬停在徘徊之外。

Answer 2

dgig是对的。每次将鼠标悬停在元素上时，都会将另一个事件绑定到每个$（'div.stackgo'）。

如果您将代码重构为：

    $('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";
    });

应该给你想要的结果。仅供参考，您需要确保在运行此脚本之前加载div标签。

不再需要jQuery / kill实例

2 个答案: