-1

我定义了一个标签选择器，它将根据“组”生成复选框输入。如果我选择我想要的标签并按下完成按钮，它应该返回一个字符串来设置文本输入的值。

以下是相关代码。问题是它只在第一次运行良好。例如，第一次，如果我在标签中检查了'jquery'，'javascript'，

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

打印出'输出是：jquery，javascript'。作品！然后我再次使用它并选择'jquery'，'javascript'，'bootstrap'，它会返回

output is: jquery,javascript,bootstrap
output is:

'jquery'，'javascript'，'bootstrap'再一次，它返回

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

似乎按下了完成按钮，该函数被重复调用。坚持了几个小时，但无法弄清楚。非常感谢您的回答！谢谢

(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);           
})
4

1 回答 1

1

每次单击元素时，您都在初始化插件。您应该在 DOM 准备好时对其进行一次初始化。

或者，如果您仍然想这样做；您可以.one()让事件只运行一次并自行删除。用于.off()分离事件，附加.on().

于 2013-01-29T22:49:45.263 回答