Javascript [jQuery]在使用$（div.HTML（）更改HTML后，所有jQuery交互都以div停止

我正在使用jQuery和Ajax/PHP为一个项目制作一个标签库。 为此，我有一个包含标签列表的容器。通过单击按钮，它通过隐藏其他淡入/淡出显示列表。“我的列表”中的元素会随机移动，通过单击li元素，它会将其添加到标记栏并将其从列表中删除；通过再次单击标记栏，它会将其从列表中删除并将其添加到他所在的列表中。 我的问题来自于从酒吧移除标签。当我这样做时，列表动画停止，标签不再可点击

以下是HTML标记栏部分：

        <ul id="tagsBar">
        <li id="BTag1" class="tagContainer">
            <div id="" class="tagDeco"></div>

            <div class="delTag">
                Retirer le Tag
            </div>
        </li>

        <li id="BTag2" class="tagContainer">
            <div id="" class="tagDeco"></div>

            <div class="delTag">
                Retirer le Tag
            </div>
        </li>

        <li id="BTag3" class="tagContainer">
            <div id="" class="tagDeco"></div>

            <div class="delTag">
                Retirer le Tag
            </div>
        </li>

        <li id="BTag4" class="tagContainer">
            <div id="" class="tagDeco"></div>

            <div class="delTag">
                Retirer le Tag
            </div>
        </li>

        <li id="BTag5" class="tagContainer">
            <div id="" class="tagDeco"></div>

            <div class="delTag">
                Retirer le Tag
            </div>
        </li>
    </ul>

清单部分包括：

<div class='cloudsWord'>
   <div class="tags" id="Bgenre">
       <ul id='LISTgenre'>
           <li>blabla</li>
       </ul>
   </div>
</div>

jQuery部分：

function addTags() {
$('.cloudsWord ul li').each(function() {
    animateDiv($(this));
});
var working = false;
$(".tags ul li").click(function() {

    if (working) return;
    working = true;
    var tag = $(this).text();
    var tagList = $(this).closest("ul").attr("id");
    $(".tagContainer").each(function() {
        if ($("> .tagDeco", this).text() === "" && $("> .tagDeco", this).attr('id') === "")    {
            $("> .tagDeco", this).attr('id', "BAR" + tagList).html(tag);
            $('> .tagDeco', this).fadeIn();
            $(this).css({
                'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)'
            });
            return false;
        }
    });
    $(this).remove();
    $(document).trigger('tagUpdate');
    working = false;
});
}
function delTags() {
var working = false;
$(".tagContainer").click(function() {
    if (working) return;
    working = true;
    var TagToReplace = $('> .tagDeco', this).text();
    var tagList = "#" + $('> .tagDeco', this).attr('id').slice(3);
    var random = 1 + Math.floor(Math.random() * 5);
    var tagSize = "tag" + random;
    var liElement = "<li><a class=\"" + tagSize + "\" href=\"javaScript:void(0);\">" + TagToReplace + "</a></li>";
    var html = $(tagList).html() + liElement;

    if ($('> .tagDeco', this).attr('id') !== "" && $('> .tagDeco', this).text() !== "") {
        $(this).css({
            'box-shadow': ' inset 0px 0px 0px rgba(0,0,0,0.45)'
        });
        $('> .tagDeco', this).fadeOut();
        $('> .delTag', this).fadeOut();
        $('> .tagDeco', this).attr("id", "").html("");
        $(tagList).html(html);
    }
    working = false;
$(document).trigger('tagUpdate');
});
}

我找不到我搞砸了的地方，请随时帮忙：p

---

非常感谢愿意花时间帮助我的人：如果需要的话，我会试着做一把小提琴。

您已经将事件绑定到可能被替换的特定元素。您希望使用on函数而不是“单击”

function addTags() {
$('.cloudsWord ul li').each(function() {
    animateDiv($(this));
});
var working = false;
$(".tags ul li").on("click", function() {

    if (working) return;
    working = true;
    var tag = $(this).text();
    var tagList = $(this).closest("ul").attr("id");
    $(".tagContainer").each(function() {
        if ($("> .tagDeco", this).text() === "" && $("> .tagDeco", this).attr('id') === "")    {
            $("> .tagDeco", this).attr('id', "BAR" + tagList).html(tag);
            $('> .tagDeco', this).fadeIn();
            $(this).css({
                'box-shadow': ' inset 0px 4px 8px rgba(0,0,0,0.45)'
            });
            return false;
        }
    });
    $(this).remove();
    $(document).trigger('tagUpdate');
    working = false;
});
}
function delTags() {
var working = false;
$(".tagContainer").on("click", function() {
    if (working) return;
    working = true;
    var TagToReplace = $('> .tagDeco', this).text();
    var tagList = "#" + $('> .tagDeco', this).attr('id').slice(3);
    var random = 1 + Math.floor(Math.random() * 5);
    var tagSize = "tag" + random;
    var liElement = "<li><a class=\"" + tagSize + "\" href=\"javaScript:void(0);\">" + TagToReplace + "</a></li>";
    var html = $(tagList).html() + liElement;

    if ($('> .tagDeco', this).attr('id') !== "" && $('> .tagDeco', this).text() !== "") {
        $(this).css({
            'box-shadow': ' inset 0px 0px 0px rgba(0,0,0,0.45)'
        });
        $('> .tagDeco', this).fadeOut();
        $('> .delTag', this).fadeOut();
        $('> .tagDeco', this).attr("id", "").html("");
        $(tagList).html(html);
    }
    working = false;
$(document).trigger('tagUpdate');
});
}

---

JSFIDLE或codepen肯定会有帮助。只需使用.on不会改变行为，您必须将其委托给任何父静态级别IIRC，.on替代了.live方法，该方法能够处理新添加到DOM中的项上的事件。如果需要，可以将其更改为$。。。父选择器…在“单击”时。。。选择要在…上驱动的子元素，函数{…}；但要使用.on委托事件，您必须传递选择器参数：。on events[，selector][，data]，handler，例如不是最好的示例$document.onclick、.tagContainer、函数{…}；实际上，该方法所做的只是将事件目标元素过滤到静态父级，匹配或不匹配选择器参数，代码$.tags ul.onclick，li，function{…}；足够如果不是，我将撤回这个回答，如果UL是静态的。我必须承认，OP发布了太多的代码，我并没有做任何努力去阅读它，顺便说一句，这是相当不可读的代码