如何在此函数中有效使用 "this" 而不影响其他点击事件？

Question

我不明白这里有什么问题。代码的主要目的是创建动态行并删除它们。我的代码工作正常。但这里的主要问题是当我使用函数调用冗余代码时，如果我单击一个模块（页面），它会影响另一个页面。我

dynamicRow.js

$(document).ready(function () {
    var $schoolAdd = $(document).find('div.schoolAdd');
    var $collegeAdd = $(document).find('div.collegeAdd');

 var $deleteButton='<div><button type="submit" class="reservedFieldRemoveButton"><i class="fa fa-minus"></i></button></div>';


   $schoolAdd.on('click','button.addButton',function(){
            var $parent= $(this).parent().parent();
            $(this).remove();
            $parent.append($deleteButton);
            $rschoolAdd.append($reservedRowToAppend);
        });
    $collegeAdd.on('click','button.addButton',function(){
            var $parent= $(this).parent().parent();
            $(this).remove();
            $parent.append($deleteButton);
            $collegeAdd.append($reservedRowToAppend);
        });
})

这适用于学校和大学模块。但问题是当我在函数中这样做时

  function testFunction(addButton){
       var $parent= $(addButton).parent().parent();
       $(addButton).remove();
       $parent.append($deleteButton);
  }
  $schoolAdd.on('click','button.addButton',function(){
            testFunction('button.addButton');
            $rschoolAdd.append($reservedRowToAppend);
  });
  $collegeAdd.on('click','button.addButton',function(){
            testFunction('button.addButton');
            $collegeAdd.append($reservedRowToAppend);
  });

但是当我点击学校模块的事件时使用这个功能，我看到大学模块也受到影响。但这不应该发生。它们是独立的功能。我猜我可能在函数中以错误的方式使用了 "this"。我该如何解决？

Answer 1

因为您正在访问所有 DOM 中具有 class .addButton 的所有按钮元素，而不仅仅是单击的那个。为什么你没有使用 'this'？

你的HTML代码我想象出来了，因为你还没有发布（下次记得发布）：

$(document).ready(function () {
    var $schoolAdd = $(document).find('div.schoolAdd');
    var $collegeAdd = $(document).find('div.collegeAdd');

 var $deleteButton='<div><button type="submit" class="reservedFieldRemoveButton"><i class="fa fa-minus"></i>delete</button></div>';
    function testFunction(addButton){
           var $parent= $(addButton).parent().parent();
           $(addButton).remove();
           $parent.append($deleteButton);
      }
      $schoolAdd.on('click','button.addButton',function(){
                testFunction(this);
                $schoolAdd.append("added!");
      });
      $collegeAdd.on('click','button.addButton',function(){
                testFunction(this);
                $collegeAdd.append("added!");
      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schoolAdd"><div><button class="addButton">add</button></div></div>
<div class="collegeAdd"><div><button class="addButton">add</button></div></div>

如何在此函数中有效使用 "this" 而不影响其他点击事件？

How can I use "this" effectively in this function so it won't affect other click events?

javascript

jquery

this