Question

I define a tag picker which will generate checkbox inputs based on “group”. If I select the tags I want and press done button, it should return a string to set the value of a text input.

Here are the related codes. The problem is it only works well at the first time. For example, for the first time, if I checked ‘jquery’,’javascript’ in the tags,

console.log('output is:' + tags);

print out ‘output is: jquery,javascript’. Works!
Then I use it again and select ‘jquery’,’javascript’,’bootstrap’,
it will return

output is: jquery,javascript,bootstrap
output is: 

One more time for ‘jquery’,’javascript’,’bootstrap’, it returns

output is: jquery,javascript,bootstrap
output is:
output is:

Seems the done button pressed, the function is called repeatedly. Being stuck with it for several hours but can’t figure out. Really appreciate for your answer! Thanks

(function(){
  $.fn.tagPicker = function(source,options){
    var settings = $.extend({
      perRow : 3
    },options);

    $.fn.attachRow = function(row,col){
      //codes here
      ...
    }

    $.fn.attachPicker = function(){
      //codes here
      // generate html for checkbox inputs
      ...
    };

    var $input = this;

    if($('.tag-picker').length == 0){ 
      $input.attachPicker(); 

      $('body').on('click','.tag-picker .close-picker',function(){
        $('.tag-picker').remove();
      })

      $('.tag-picker .close-picker').off();

      $('body').on('click','.tag-picker #btn-done', function(){
        var tags = getTags();
        $('.tag-picker').remove();
        console.log('output is:' + tags);
        $input.val(tags);       
      });
    }

    function getTags(){
      var t = [];
      $('.tag-picker input').each(function(){
        if($(this).is(':checked')) t.push($(this).attr('id'));
      })
      return t.join(',');
    }
  }
})(jQuery);

$('body').on('click','input.participant',function(){
      $(this).val('');
      $(this).tagPicker(group);           
})

Answer 1

You are initialising the plugin every time the elements are clicked. You should initialise it once, on DOM ready.

OR if you want to do this anyway; you could use .one() for the event to run only once and remove itself. Use .off() to detach an event, attached with .on().