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")以查看它是否再次触发。

JS“click”事件只能运行一次

1 个答案: