JS“click"事件只工作一次

我想工作点击事件不止一次。我试过"live"，但它没有任何作用。我有另外两个脚本，看起来像我在这里分享的一样。而且，它是一个Django项目。如果有其他好的方法来完成这个项目，请写信。注意:不能编辑url .py。

这是我的JS代码:

<script>
text = "<div class=" + "'row'>" +
    "<div class=" + "'isotope-gallery-container'>" +
"{% for project in project_filter_category %}" +
"{% if project.is_completed %}" +
"<div class=" + "'col-md-3 col-sm-6 col-xs-12 gallery-item-wrapper artwork creative'>" +
    "<div class=" + "'gallery-item'>" +
        "<div class=" + "'gallery-thumb'>" +
            "<img src=" + "'{{ project.cover_photo.url }}'" + "class=" + "'img-responsive'> " +
            "<div class=" + "'image-overlay'>" + "</div>" +
            "<a href=" + "'{{ project.cover_photo.url }}'" + "class=" + "'gallery-zoom'>" + "<i class=" + "'fa fa-eye'>" + "</i>" + "</a>" +
            "<a href=" + "'{{ project.id }}'" + "class=" + "'gallery-link'" +  "target=" + "'_blank'>" + "<i class=" + "'fa fa-link'>" + "</i></a>" +
      "</div>" +
        "<div class=" + "'gallery-details'>" +
            "<h5>Tamamlanmış</h5>" +
        "</div>" +
    "</div>" +
"</div>" +
"{% endif %}" +
"{% endfor %}" +
"</div>" +
"</div>"
$(document).ready(function(){
  $("#btn-done").on("click", function(e){
    e.preventDefault();
    $("#change").replaceWith(text);
});
});
</script>

下面是我的HTML代码:

<ul class="filter">
        <li class="active">
            <a id="btn-all" href="">Hepsi</a>
        </li>
        <li>
            <a id="btn-done" href="">Tamamlanmış</a>
        </li>
        <li>
            <a id="btn-on" href="">Devam Eden</a>
        </li>
    </ul>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
            <!-- /.gallery-filter -->
    <div id="change">
    <div class="row">
        <div class="isotope-gallery-container">
          {% for project in project_filter_category %}
            <div class="col-md-3 col-sm-6 col-xs-12 gallery-item-wrapper artwork creative">
                <div class="gallery-item">
                    <div class="gallery-thumb">
                        <img src="{{ project.cover_photo.url }}" class="img-responsive" alt="1st gallery Thumb">
                        <div class="image-overlay"></div>
                        <a href="{{ project.cover_photo.url }}" class="gallery-zoom"><i class="fa fa-eye" alt="{{ project.title }}"></i></a>
                        <a href="{{ project.id }}" class="gallery-link" target="_blank"><i class="fa fa-link"></i></a>
                    </div>
                    <div class="gallery-details">
                        <h5>Hepsi</h5>
                    </div>
                </div>
            </div>
        {% endfor %}
      </div>
    <!-- /.row -->
</div>
<!-- /.container -->