Question

我正在尝试更改此演示： http://maxwells.github.io/bootstrap-tags.html

进入响应式版本，我可以将其设置为readOnly并将其从readOnly中删除，如我所愿。这段代码：

var alltags = ["new tag", "testtag", "tets", "wawa", "wtf", "wtf2"];
    $(document).ready(function() {
        var tagbox = $('#my-tag-list').tags({
            suggestions: alltags
        });
        var tagenable = true;
        $('#my-tag-list').focusout(function() {
            if (tagenable) {
                tagbox.readOnly = true;
                $('#my-tag-list').empty();
                tagbox.init();
                tagenable = false; 
            }
        });
        $('#my-tag-list').click(function() {
            if(!tagenable) {
                tagbox.readOnly = false;
                $('#my-tag-list').empty();
                tagbox.init();
                tagenable = true;
            }
        });
    });

似乎工作得相当好，它在焦点输出后使所有内容都只读，当我点击它时可以编辑。但是，编辑不起作用，因为我无法插入新标签或删除它们（似乎就像事件处理丢失或类似的东西）。

我猜想清空#my-tag-list div导致了这种情况，但是我还没有找到一种方法来使用＃34; detach＆＃34;相反，它会删除内部的所有内容（而不是元素本身）并将其重新放回。

我试图制作一个JS小提琴，但它还没有真正发挥作用： http://jsfiddle.net/tomzooi/cLxz0L06/ 有效的方法是整个网站的保存，在这里： https://www.dropbox.com/sh/ldbfqjol3pppu2k/AABhuJA4A6j9XTxUKBEzoH6za?dl=0 这个链接有我正在使用的bootstrap-tags东西的最小化JS： https://github.com/maxwells/bootstrap-tags/blob/master/dist/js/bootstrap-tags.js

Answer 1

到目前为止，我设法通过对bootstrap javascript代码进行一些修改来完成此操作。我使用了两个不同的标签框，我隐藏了一些点击事件并取消隐藏。

var tagbox = $('#my-tag-list').tags({
                suggestions: alltags,
                tagData: tmp_tags,
                afterAddingTag: function(tag) { tagboxro.addTag(tag); },
                afterDeletingTag: function(tag) {tagboxro.removeTag(tag); }
            });
            var tagboxro = $('#my-tag-listro').tags({
                suggestions: alltags,
                tagData: tmp_tags,
                readOnly: 'true',
                tagSize: 'sm',
                tagClass: 'btn-info pull-right'
            });
$(document).mouseup(function (e) {
                var container = $("#my-tag-list");
                if (!container.is(e.target) // if the target of the click isn't the container...
                && container.has(e.target).length === 0) { // ... nor a descendant of the container
                if (tagsave) {              
                    $("#my-tag-listro").show();
                    $("#my-tag-list").hide();
                    var tags = tagbox.getTags();
                    $.post("%basedir%/save.php",  {
                        editorID:"new_tags",
                        tags:tags
                      }, function(data,status){
                        //alert("Data: " + data + "\nStatus: " + status);
                    });
                        tagsave = false;
                }
                }
            });
            $('#my-tag-listro').click(function() {
                tagsave = true;
                //$(".tag-list").toggle();
                $("#my-tag-list").show();
                $("#my-tag-listro").hide();

            });

我不得不修改bootstrap-tags.js的代码以允许这样做，因为它通常会在init函数中被认为只读时删除所有有用的函数：

 if (this.readOnly) {
                    this.renderReadOnly();
                    this.removeTag = function(tag) {
                        if (_this.tagsArray.indexOf(tag) > -1) {
                            _this.tagsArray.splice(_this.tagsArray.indexOf(tag), 1);
                            _this.renderReadOnly();
                        }
                        return _this;
                    };
                    this.removeTagClicked = function() {};
                    this.removeLastTag = function() {};
                    this.addTag = function(tag) {
                        _this.tagsArray.push(tag);
                        _this.renderReadOnly();
                        return _this;
                    };
                    this.addTagWithContent = function() {};
                    this.renameTag = function() {};
                    return this.setPopover = function() {};
                }

如果这个功能以一种不那么糟糕的方式被合并，那么

会很棒。）

使bootstrap-tags响应，jquery事件丢失

1 个答案: