Strange behavior with on/off click and jQuery?

Question

so I'm trying to use link clicks to add buttons to a div, then be able to click those buttons to remove them and re-enable the original links to be clicked again so you can add and remove an infinite number of times. I have it mostly working, but after trying to re-enable the click function I'm getting strange behavior.

1) You need to click the link twice to re-append the button and

2) Sometimes I'm getting multiple instances of the appended button in the div now.

Here is my code:

var selections = ' ';
    function add_Button() {
      jQuery(".form-unselected").click(function (e) {
        jQuery(this).removeClass('form-unselected').addClass('selected').off('click');
        var title = jQuery(this).attr("title");
        var id = jQuery(this).attr("href");
        selections += title + ', ';
        var button_content = jQuery('<button class="content-button">').html(title).attr("title", title).attr("id",id);
        event.preventDefault();
        $( "#selected-items" ).append(button_content);
        console.log(selections);
      });
    }
    add_Button();
    jQuery(document).on('click','.content-button', function(e){
      var removed_content = jQuery(this).attr("title") + ', ';
      selections =  selections.replace(removed_content,'');
      var href = jQuery(this).attr("id");
      jQuery(".add-to-form[href='"+ href +"']").addClass('form-unselected').removeClass('selected').on('click', add_Button );
      jQuery(this).remove();
      console.log(selections);
    });

The selections variable is a comma separated list of the values for another purpose, but I'm getting the duplicates there as well. Thanks in advance!

Answer 1

You should not dynamically add and remove the click handler. Initially add the click handlers to all the buttons. Then when clicked you can query the status and decide.

Also there was an unknown reference event that did not match the argument e .

And, repeating jQuery(this) is expensive. Store this value in a local variable and refer to it instead. The code below demonstrates all the changes.

var selections = ' ';
      jQuery(".form-unselected").click(function (e) {
        var $this = jQuery(this);
        if ($this.hasClass("selected")) {
          return;
        }
        $this.removeClass('form-unselected').addClass('selected');
        var title = $this.attr("title");
        var id = $this.attr("href");
        selections += title + ', ';
        var button_content = jQuery('<button class="content-button">').html(title).attr("title", title).attr("id",id);
        e.preventDefault();
        $("#selected-items").append(button_content);
        console.log(selections);
      });
    jQuery(document).on('click','.content-button', function(e) {
      var $this = jQuery(this);
      var removed_content = $this.attr("title") + ', ';
      selections =  selections.replace(removed_content,'');
      var href = $this.attr("id");
      jQuery(".add-to-form[href='"+ href +"']").addClass('form-unselected').removeClass('selected');
      $this.remove();
      console.log(selections);
    });