JS “click” event only works once

Question

I want to work click event more than once. I tried "live", but it did not do anything. I have 2 other scripts which look like the same as I shared here. Also, it is a Django project. If there is another good way to work this project, please write. Note: Not Urls.py editing.

Here is my JS code:

<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>

Here is my HTML code:

<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 -->

Answer 1

I think the text variable isn't changing, so when pressing the button again it replaces the content of change with the same content.

Add a console.log("Event fired") to the function handler to see see if it is firing again.

Answer 2

I saw it now I forgot to add div id=change to JS. Because of not present any change div, it could not change. Thank you for your answer to recognize me to know my JS is working fine @Damian Castro