title: Circular reference using javascript click event
body: <p>I have a class in JavaScript which has some functions. Two of them are supposed to change the text of a button and its onclick event. I tried to do it by myself, but I'm running into a circular reference issue. I believe I have to use something like "preventDefault()", but I couldn't use it... </p>
  
  <p>Follow my functions of the class:</p>
  
  <pre><code>this.add_person = function(row, btn) {
      $(btn).parent().parent().addClass("selected_row");
      $(btn).text("-");
      $(btn).attr("onclick", function(e) {
          //e.preventDefault();
          $.adfg.tabs.del_person(row, btn); 
      });
  }
  this.del_person = function(row, btn) {
      $(btn).parent().parent().removeClass("selected_row");
      $(btn).text("+");
      $(btn).attr("onclick", function() {
          //$.adfg.tabs.add_person(row, btn); it starts to call the other function and the circular reference to the functions starts...
      });
  }
  </code></pre>
  
  <p>And here is the button</p>
  
  <pre><code>'&lt;a class="btn btn-info btn-sm" onclick=$.adfg.tabs.add_person(' + meta.row + ',this)&gt;' + '+' + '&lt;/a&gt;'
  </code></pre>