javascript - JS "click"事件仅有效一次

Question

我想多次处理点击事件。我尝试过“live”，但它没有做任何事情。我还有另外 2 个脚本，它们看起来与我在这里共享的相同。另外，它是一个 Django 项目。如果还有其他好的方法来完成这个项目，请写下来。注意:不是Urls.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 -->

Answer 1

我认为 text 变量没有改变，因此当再次按下按钮时，它会将 change 的内容替换为相同的内容。

将 console.log("Eventfired") 添加到函数处理程序以查看它是否再次触发。