不再需要时使用jQuery/kill实例

jQuery / kill Instance when not needed anymore

本文关键字：jQuery kill 实例 不再      更新时间：2023-09-26

得到以下问题宽度jQuery：在一个站点上，有许多div容器，它们具有相同的类"stackgo"，但具有不同的数据附加。示例：

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

我写了一些jQuery代码来将Post Massage应用于PHP文件，鼠标指针在div容器上方悬停时会发生变化，并在单击时发送Post Massage：

$('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后，点击功能内的所有内容都将执行两次。我点击的容器越多，执行的"点击"功能就越多。（可以在大量的警报窗口和数据库中的条目中看到（由schreibmaterialnei.php管理）。不使用旧值，总是使用新值，就像我总共点击的一样多。

它似乎遍历了这个类"stackgo"在单击过程中创建的每个实例。

我该如何控制？我完全不知道：（

我将非常感谢

的任何帮助

我认为，每当你悬停时，你都会将另一个"点击"绑定到你的div.stackgo上。我敢打赌，即使没有点击，你也会发现，如果你只是将鼠标悬停/移出几次，然后点击，你会看到同样的效果。

解决方案是检查是否已经绑定了任何单击，在这种情况下，在绑定单击事件或将"单击"绑定完全移出悬停之前返回false。

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标记已加载。

相关文章：