使用 JQuery 添加/删除带有输入字段的重复 div

我想完成这个功能，但我不确定我哪里出错了。

我正在尝试使用 jquery 添加和删除名为"里程碑"的div，其中包含各种输入。我目前有"添加里程碑"按钮。每个里程碑div 都有一个"删除里程碑"按钮，单击该按钮时，应完全删除该div。由于某种原因，我无法与那些动态笼子div 中的按钮进行交互。

我也在尝试增加里程碑#。

该目录

   <!-- 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 -->

杰奎里

$().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小提琴在这里。

谢谢！

代码出错的地方在于，您最初在代码中使用类.delete-milestone将事件处理程序附加到元素，而这些元素是动态添加的。因此，当执行代码时，它会尝试将事件处理程序附加到具有类 .delete-milestone 的元素，但实际上不存在任何元素。

您可以在将元素注入 HTML 后改为附加事件处理程序。看看这个修改后的代码jsfiddle。

或者您也可以使用onclick属性。

对于递增里程碑#，您可以使用一个单独的变量来保持计数。添加元素时递增，删除元素时递减。

你的 javascript 在 .delete-milestones 上定义了 click 事件，然后它就存在了。您必须在将其添加到 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')
    });
});

首先，代码等待文档准备就绪。它将运行您在开始时发布一次的代码。

文档准备就绪后，$('.delete-milestone')将获得当前位于页面上的按钮列表。 .click(...)将向其添加事件侦听器。

稍后，如果添加更多按钮，则没有代码会向它们添加事件侦听器。

这里有两个关于如何使其工作的想法：

创建按钮时，请添加事件侦听器。
使用委托事件来处理与冒泡到共同祖先的选择器匹配的任何事件。

相关内容

最新更新

热门标签：