我想在用户单击添加按钮时在图像上添加复选框

Question

当用户单击链接“출력하기”时，网络应在我编码的所有图像上添加一个复选框。 但它没有勾选。 有人可以帮我吗？

这是我的js。

$(document).ready(function(){ 
    $("#print").on('click', function(){ 
        $('#post').append('<input type="checkbox" />'); 
    }); 
}); 

这是索引html

 <div class="collapse navbar-collapse" id="navbar">
          <div class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menu<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="{% url 'index' %}">Home</a></li>
                <li><a id="print" href="">출력 하기</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="{% url 'account_logout' %}">로그아웃</a></li>
              </ul>
            </li>
          </div>
          <div class="profile__body">
      <ul class="row first">
        {% for photo in posts %}
          <li class="col-xs-4" id="post">
              <img id="{{photo.pk}}" src="{{photo.image_file.url}}" class="img-r">
          </li>
        {% empty %}
        <li>게시한 사진이 없습니다.</li>
          {% endfor %}
      </ul>
    </div>
    </div>

Answer 1

因为#print是链接（ <a> ），所以您必须使用.preventDefault()来防止事件发生重定向的默认行为，如下所示：

$(document).ready(function(){ 
    $("#print").on('click', function(ev) { // the argument ev is the event
        $('#post').append('<input type="checkbox" />');

        ev.preventDefault(); // stop the link from redirecting 
    }); 
});