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

时间:2017-02-11 15:10:19

标签: javascript html image checkbox

当用户点击链接"출력하기"时,网页应在所有图片上添加一个复选框 我这样编码。 但它没有复选框。 有人可以帮帮我吗?

这是我的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>

1 个答案:

答案 0 :(得分:0)

由于#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 
    }); 
});