ユーザーが追加ボタンをクリックしたときに画像にチェックボックスを追加したい場合

Question

ユーザーが "出力する"リンクをクリックすると、すべての画像にチェックボックスを追加する必要があります i code that i code。 ですが、チェックボックスは作成されません。 誰か助けてくれませんか？

これは私のjsです。

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

これは#printリンク（<a>）ですので、あなたがこのような.preventDefault()を使用して、リダイレクトされたデフォルトの動作からのイベントを防ぐために持っているインデックス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

です：

$(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 
    }); 
});