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

您的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')
    });
});

Answer 2

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

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

稍后，如果添加更多按钮，则代码不会向其添加事件侦听器。

以下是关于如何使其发挥作用的两个想法：

创建按钮时，添加事件侦听器。
使用delegated events处理任何与选择器匹配的事件，这些选择器会冒泡到共同的祖先。

Answer 3

您的代码出了什么问题，您最初在代码中将事件处理程序附加到具有类.delete-milestone的元素，而这些元素是动态添加的。因此，当代码执行时，它会尝试将事件处理程序附加到具有类.delete-milestone的元素，但实际上没有元素存在。

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

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

为了增加里程碑＃，你可以有一个单独的变量来保持计数。添加元素时递增，删除元素时递减。

使用JQuery

3 个答案: