这是HTML部分：

<div class="toggle-3">
    <a href="#" class="deploy-toggle-3"> More Details
        <em>
            <strong></strong>
        </em>
    </a>
    <div class="toggle-content">
        <p>Text Here</p>
    </div>
</div>

当您单击More Details时，HTML更改为：

<div class="toggle-3">
    <a href="#" class="deploy-toggle-3"> More Details
        <em class="toggle-3-active-background">
            <strong class="toggle-3-active-ball"></strong>
        </em>
    </a>
    <div class="toggle-content" style="display: block;">
        <p>Text Here</p>
    </div>
</div>

之所以会这样，是因为我使用了包含此代码的脚本（我们将其称为toggle-script以供将来参考）

$(".deploy-toggle-3").click(function() {
    $(this).parent().find('.toggle-content').slideToggle(200);
    $(this).find('em strong').toggleclass('toggle-3-active-ball');
    $(this).find('em').toggleclass('toggle-3-active-background');
    return false;
});

到目前为止一切顺利。现在，由于各种原因，我想进行AJAX调用并更新HTML。我使用以下脚本执行此操作：

function createHTML() {
    let content = 
        ' <div class="container"> ' +
        ' <div class="toggle-3"> ' +
        ' <a href="#" class="deploy-toggle-3">{14} ' +
        ' <em><strong></strong></em></a> ' +
        ' <div class="toggle-content"> ' +
        ' <p>{15}</p> ' +
        ' </div> ' +
        ' </div> '
    ;

    return content.format(
        // In here I replace the {14} and {15} with what I want
    );
}

let my_content = createHTML();

$("#my-container").html(my_content);

尽管它确实可以正确替换HTML，但我注意到它从More Details元素中删除了事件监听器。这意味着，如果单击它，它将不会运行toggle-script。 阅读JQuery DOC，我发现了这一点：

jQuery从中删除了其他构造，例如数据和事件处理程序 子元素，然后用新内容替换这些元素。

我的临时解决方法是在运行toggle-script函数之后重新包含.html()。

1）有人可以解释我所描述的确实是这种情况吗？还是到底发生了什么？

2）有没有比我的临时解决方案更有效地处理此问题的方法？理想情况下，一种首先不删除事件侦听器的方法。

3）我更新HTML的方式是否最优？有更好的方法可以做到这一点，为什么？