使引导标记响应，jquery 事件丢失

Making bootstrap-tags responsive, jquery events lost

本文关键字：jquery 事件 响应      更新时间：2023-09-26

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

变成一个响应式版本，我可以在其中将其设置为只读并根据需要将其从只读中删除。此代码：

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-listdiv 会导致这种情况，但我还找不到一种方法来使用例如"分离"来删除内部的所有内容（而不是元素本身）并将其放回原处。

我试图制作一个JS小提琴，但它还没有真正工作得那么好：http://jsfiddle.net/tomzooi/cLxz0L06/确实有效的事情是保存整个网站，如下所示：https://www.dropbox.com/sh/ldbfqjol3pppu2k/AABhuJA4A6j9XTxUKBEzoH6za?dl=0此链接具有我正在使用的引导标签内容的未最小化JS：https://github.com/maxwells/bootstrap-tags/blob/master/dist/js/bootstrap-tags.js

到目前为止，

我设法通过对引导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();
            });

我不得不修改引导标签的代码.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() {};
                }

如果以不那么黑客的方式合并此功能，那就太棒了:)

相关文章：