使用JQuery添加/刪除帶有輸入字段的重複div

Question

我想完成此功能，但我不確定我要出錯的位置。

我試圖添加和刪除稱爲'里程碑'與他們與jquery裏面的各種輸入的div。目前我有「添加里程碑」按鈕。每個里程碑div都有一個「刪除里程碑」按鈕，點擊後，應該完全刪除該div。出於某種原因，我無法與這些動態製作的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-milestones存在之前定義了點擊事件。添加到dom後，您必須點擊.on點擊。

試試這個：

$('.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. 使用delegated events來處理任何與選擇器相匹配的事件，這些選擇器會冒泡到共同的祖先。