Question

正如您所看到的，我正在动态添加表单输入以及添加和删除新旧“删除项目”按钮。但删除按钮不会触发。我删除了.remove（）;部分来自删除功能，我设置了一个警告，单击删除按钮，但我甚至没有得到警报。 JQuery的新手，所以这已经是一个学习曲线，我一直在研究试图解决这个问题2天。我觉得我一直很努力地绞尽脑汁。非常感谢任何帮助。

jQuery的：

 $(document).ready(function(){
   // Variable $countDays starts at 1
   $countDays = 1;
   // Variable $countTech starts at 1
   $countTech = 1;
   // This function adds an additional day field and uses the $count variable to append the id and name on the input
   // values. Count is increased before data is added to the div #addDay to maintain proper variable passing.   
   $("#hide2").click(function(){
      if($countDays < 7) {
         $countDays ++;      
         $('<div class="form-group" id="divRemove'+$countDays+'">Date Started:<input class="form-control" type="date" name="day'+$countDays+'Start" id="day'+$countDays+'Start" />Time In: <input class="form-control" type="time" name="day'+$countDays+'TimeIn" id="day'+$countDays+'TimeIn" />Time Out:<input class="form-control" type="time" name="day'+$countDays+'TimeOut" id="day'+$countDays+'TimeOut" /><button type="button" id="whyNot" class="fa fa-minus-circle fa-2x pull-right">Remove</button><br /></div>').appendTo("#addDay");
         if($countDays > 2) {  
           $('#whyNot').remove();
         }
     }
     if($countDays === 7) {
         $('#hide2').remove();
         $('#hide3').remove();
         $('#hide4').remove();
     }
   });


   $("#btnAddTech").click(function() {
      if($countTech < 6) {
         $('<div class="form-group" id="byeTech'+$countTech+'"><select class="form-control" name="additionalTech'+$countTech+'" id="additionalTech'+$countTech+'"><option>put php while here</option></select><button type="button" id="removeTech'+$countTech+'" class="fa fa-minus-circle fa-2x pull-right"> Remove</button><br id="pull'+$countTech+'" /><br id="pull2'+$countTech+'" /></div>').appendTo("#addTech");
         if($countTech > 1) {
           $win = $countTech - 1;  
           $('#removeTech'+$win+'').remove();
           $('#pull'+$win+'').remove();
           $('#pull2'+$win+'').remove();
         }
       $countTech ++;      
     }
     if($countTech === 6) {
         $('#btnAddTech').remove();
         $('#btnAddTech1').remove();
         $('#btnAddTech2').remove();
     }
   });
  $("#removeTech5").click(function() { 
         alert("Derp5");
  });
  $("#removeTech4").click(function() { 
         alert("Derp4");
  });
  $("#removeTech3").click(function() { 
         alert("Derp3");
  });
  $("#removeTech2").click(function() { 
         alert("Derp2");
  });
  $("#removeTech1").click(function() { 
         alert("Derp1");
  });

});

形式：

<div class="col-lg-6">
  <form method="" action="">
    <div class="form-group">
      Work Done:
      <textarea class="form-control" rows="7" name="detailedDescription" id="detailedDescription" autofocus>

      </textarea>
    </div>

    <div class="form-group">
      Date Started:<input class="form-control" type="date" name="day1Start" id="day1Start" />
      Time In: <input class="form-control" type="time" name="day1TimeIn" id="day1TimeIn" />
      Time Out:<input class="form-control" type="time" name="day1TimeOut" id="day1TimeOut" /><br />
    </div>

    <div id="addDay"></div>

    <div class="form-group">
      <button type="button" id="hide2" class="fa fa-plus-circle fa-2x"> Add Work Day</button>
      <br id="hide3" />
      <br id="hide4" />
      Add Pictures:
      <input type="file" name="photo1" id="photo1" /><br />
      <input type="file" name="photo2" id="photo2" /><br />
      <input type="file" name="photo3" id="photo3" /><br />
      <input type="file" name="photo4" id="photo4" /><br />
    </div>

    <div id="addTech"></div>

    <div class="form-group">
      <button type="button" id="btnAddTech" class="fa fa-plus-circle fa-2x"> Add Technician</button>
      <br id="btnAddTech1" />
      <br id="btnAddTech2" />
      Additional Notes(Internal Only):
      <textarea class="form-control" rows="3" name="detailedDescription" id="detailedDescription">

      </textarea> 
    </div>  
    <div class="form-group"> 
      <input type="submit" value="Complete" class="has-success" />
      <input type="submit" value="Incomplete" class="has-error" />
    </div>
  </form>
</div>

Answer 1

因为您使用JS将对象添加到DOM，所以您不能使用.click。您必须将所有语句切换为.on

$("#hide2").click(function(){

变成

$(document).on('click', '#hide2', function(){

.click仅适用于document为ready时加载的元素：$(document).ready()。当您使用.on时，您基本上会重新绑定您喜欢的操作。在这种情况下，.click()，当您单击文档时

在添加JQuery之后动态删除JQuery中的元素时遇到问题

1 个答案: