ボタンをクリックしてもjavascriptファイルが呼び出されない

Question

ボタンをクリックして作成されたダイナミックフィールドを追加するには、この例に従うようにしています。exampleが動作しません。 、ここに私のhtmlヘッダに何である

$(document).ready(function(){ 

var next = 1; 
$("#b1").click(function(e){ 
    alert("Hi"); 
    e.preventDefault(); 
    var addto = "#field" + next; 
    var addRemove = "#field" + (next); 
    next = next + 1; 
    var newIn = '<input autocomplete="off" class="form-control" id="field' + next + '" name="field' + next + '" type="text">'; 
    var newInput = $(newIn); 
    var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-  danger remove-me" >-</button></div><div id="field">'; 
    var removeButton = $(removeBtn); 
    $(addto).after(newInput); 
    $(addRemove).after(removeButton); 
    $("#field" + next).attr('data-source',$(addto).attr('data-source')); 
    $("#count").val(next); 

     $("#remove").click(function(e){ 
      e.preventDefault(); 
      var fieldNum = this.id.charAt(this.id.length-1); 
      var fieldID = "#field" + fieldNum; 
      $(this).remove(); 
      $(fieldID).remove(); 
     }); 
    }); 
    }); 

：

は、ここで私は私の静的なファイルディレクトリに格納しています私のjavascriptのファイルです（他の静的ファイルは罰金ロード、ファイル名は「recipeadd.js」です） JSと関連するCSSファイルの両方のロード：

<div class="container"> 
<div class="form-group"> 
    <!--div class="col-xs-4"--> 
    <label for="recipeName">Recipe Name</label> 
    <input type="text" class="form-control" id="recipeName"> 
</div> 
<div class="form-group"> 
    <input type="hidden" name="count" value="1" /> 
    <div class="control-group" id="fields"> 
     <label class="control-label" for="field1">Ingredients</label> 
     <div class="controls" id="profs"> 
      <form class="input-append"> 
       <div id="field"><input autocomplete="off" class="form-control" id="field1" name="prof1" type="text" placeholder="Enter one ingredient per line" data-items="8"/><button id="b1" class="btn add-more" type="button">+</button></div> 
      </form> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="directions">Directions</label> 
    <textarea class="form-control" rows="5" id="directions"></textarea> 
</div> 

：最後に

<!--CSS code for recipeadd--> 
    <link href="{% static 'recipes/css/recipeadd.css' %}" rel="stylesheet"> 
    <!--JS code for reccipeadd--> 
    <script src="{% static 'recipes/js/recipeadd.js' %}"></script> 

を、ここで私はJavaScriptを実行持ってしようとしているボタン「B1」を、含まれているコンテナです

私はこのプロジェクトでWeb開発とDjangoフレームワークの使用を教えています。これに関する助けに感謝します。

Answer 1

まず、ページにjQueryがあると仮定しています。コードにjQuery参照が表示されていません。

ここでコードによって要素が追加されたと仮定すると、クリックイベントの追加に関する問題が1つあります。 id="remove' + (next - 1) + '"

今

イベントを添付するとき、あなたは番号を使用しないでください：だから、どちらかあなたが既に持っている、いっその番号ORを使用する必要が$("#remove").click(

をあなたは、削除ボタンに番号をIDとして与えます参照されるボタン要素は、それを使用します。

removeButton.click(function(){ }); 

Answer 2

私はちょうど学んでいます。私はhtmlファイルにjQueryリファレンスを持っていませんでした。私は十分に良いjavascriptファイル参照を持っていた限り、私は仮定しました。 jQueryをダウンロードし、以下のリファレンスを追加しました。

<!--jQuery core code--> 
<script src="{% static 'recipes/js/jquery-3.1.0.min.js' %}"></script>