JS“单击”事件仅适用一次

Question

我想多次处理点击事件。 我尝试“直播”，但是它什么也没做。 我还有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("Event fired")到函数处理程序中，以查看是否再次触发。

Answer 2

我现在看到了，但忘记将div id = change添加到JS。 由于不存在任何更改div，因此无法更改。 谢谢您的回答，让我知道我的JS工作正常@Damian Castro