JQueryで入力欄に重複したdivを追加/削除する

Question

この機能を終了したいと思いますが、どこが間違っているのか分かりません。

私はdivestを「マイルストーン」と呼ばれ、jqueryでさまざまな入力を加えて追加しようとしています。私は現在「マイルストーンを追加」ボタンが働いています。各マイルストーン部門には「マイルストーンの削除」ボタンがあり、クリックするとその部門を完全に削除する必要があります。何らかの理由で、私はそれらの動的に作成されたdiv内のボタンと対話できません。

私もマイルストーン＃を増やそうとしています。

HTML

<!-- Milestone Title --> 
    <div class="row"> 
     <div class="col-md-5"> 
     <div class="form-group"> 
      <label class="control-label">Milestone Title</label> 
      <input class="form-control" type="text" name="Milestone[0] 
      [MilestoneTitle]" placeholder="Dusty Bench" required /> 
     </div> 
    </div> 
    </div> 

<!-- Milestone Deadline --> 
<div class="row"> 
    <div class="col-md-5"> 
    <div class="form-group"> 
     <label class="control-label">Deadline</label> 
     <input type="text" class="form-control datetimepicker" name="Milestone[0][MilestoneEndDate]" placeholder="Deadline" required/> 
    </div> 
    </div> 
</div> 

<!-- Milestone Description --> 
<div class="row"> 
    <div class="col-md-5"> 
    <div class="form-group"> 
     <label class="control-label">Milestone Description</label> 
     <textarea class="form-control" id="exampleTextarea" name="Milestone[0][Description]" rows="3" required> 
     </textarea> 
    </div> 
    </div> 
</div> 

<div class="additional-milestones"> 
</div> 

<!-- + Add Milestone Button --> 
<div class="row"> 
    <div class="col-md-5"> 
    <a class="add-milestone btn btn-primary"> 
     + Add Another Milestone 
    </a> 
    </div> 
</div> 
<!-- End Set Milestones Tab #2 --> 

jQueryの

$().ready(function() { 
    //Max amount of milestones 
    var max_milestone = 5 

    // Initial Milestone Count 
    var x = 1; 

    //function for add milestone button 
    //if button.add-milestone is clicked 
    $('.add-milestone').click(function(e) { 
    //console.log('dope') 
    e.preventDefault(); 
    if (x < max_milestone) { 
     x++; //increment milestones 
     $('.additional-milestones').before('<h4>Milestone #1</h4><div class="row"><div class="col-md-5"><div class="form-group"><label class="control-label">Milestone Title</label><input class="form-control" type="text" name="Milestone[0][MilestoneTitle]" placeholder="Dusty Bench" required /></div></div></div><div class="row"><div class="col-md-5"><div class="form-group"><label class="control-label">Deadline</label><input type="text" class="form-control datetimepicker" name="Milestone[0][MilestoneEndDate]" placeholder="Deadline" required/></div></div></div><div class="row"><div class="col-md-5"><div class="form-group"><label class="control-label">Milestone Description</label><textarea class="form-control" id="exampleTextarea" name="Milestone[0][Description]" rows="3" required> </textarea></div></div></div><div class="row"><div class="col-md-5"><a class="delete-milestone btn btn-danger"> - Delete This Milestone</a></div></div><hr>'); 
    } 
    }); 
    //then 
    //populate with milestone form with Milestone+Next Milestone Number 

    //Delete Milestone 
    $('.delete-milestone').click(function() { 
    console.log('dope') 
     //$(this).parent().remove(); 
    }); 
}); 

CSS

.btn { 
    border-width: 1px; 
    background-color: transparent; 
    font-weight: 400; 
    opacity: 0.8; 
    border-color: #888888; 
    color: #888888; 
} 

.btn-primary { 
    border: solid 1px #447DF7; 
} 

.btn-danger { 
    border: #FB404B solid 1px; 
} 

私のJSのフィドルがありますhere。

ありがとうございました！

Answer 1

は、これらの要素を動的に追加されているのに対し、あなたは、あなたのコードでは、最初はクラス.delete-milestoneで要素にイベントハンドラをアタッチしているということです。その結果、コードが実行されると、クラス.delete-milestoneの要素にイベントハンドラをアタッチしようとしますが、実際には要素は存在しません。

代わりに、要素がHTMLに挿入された後にイベントハンドラをアタッチすることができます。あなたのコードのこの変更されたjsfiddleを見てください。

また、onclick属性を使用することもできます。

マイルストーン＃をインクリメントするために、別の変数を使用してカウントを保持することができます。要素が追加された場合はインクリメントされ、削除された場合は減分されます。

Answer 2

あなたのJavaScriptは、.delete-mileestonesのclickイベントが存在する前に定義しています。 domに追加された後に.on clickを呼び出さなければなりません。

はこれを試してみてください：

$('.add-milestone').click(function() { 
    $newMilestone = $('<h4>Milestone #1</h4><div class="row"><div class="col-md-5"><div class="form-group"><label class="control-label">Milestone Title</label><input class="form-control" type="text" name="Milestone[0][MilestoneTitle]" placeholder="Dusty Bench" required /></div></div></div><div class="row"><div class="col-md-5"><div class="form-group"><label class="control-label">Deadline</label><input type="text" class="form-control datetimepicker" name="Milestone[0][MilestoneEndDate]" placeholder="Deadline" required/></div></div></div><div class="row"><div class="col-md-5"><div class="form-group"><label class="control-label">Milestone Description</label><textarea class="form-control" id="exampleTextarea" name="Milestone[0][Description]" rows="3" required> </textarea></div></div></div><div class="row"><div class="col-md-5"><a class="delete-milestone btn btn-danger"> - Delete This Milestone</a></div></div>'); 
    $('.additional-milestones').before($newMilestone); 
    $newMilestone.find('.delete-milestone').on('click', function() { 
     console.log('dope') 
    }); 
}); 

Answer 3

まず、準備になるための文書のためのコードのを待ちます。最初にをと書いたコードを実行します。

文書が準備完了すると、$('.delete-milestone')にはのボタンのリストが表示され、現在はとなります。 .click(...)はイベントリスナーを追加します。

ボタンを追加すると、コードによってイベントリスナーが追加されることはありません。

1. ボタンを作成すると、イベントリスナーを追加します。

   は、ここでそれを動作させる方法についての2つのアイデアです。

2. delegated eventsを使用すると、共通の祖先にバブルするセレクタに一致するイベントを処理できます。あなたのコードが間違って起こっている