0

我有一个很小的问题。我有一个输入字段，其中有一个按钮，可以在单击时创建它的实例。启动单击事件时一切正常，但是当我针对生成的元素时出现问题after()，我似乎无法做到这一点。请看下面的代码

HTML

<div class="after-add-more form-group">
    <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here">
</div>

    <!-- Copy Fields -->
<div class="copy hide">
    <div class="form-group more-duty">
        <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here">
        <button class="remove" type="button">Remove Stuff</button>
    </div>
</div>

<button class="add-more" type="button">Add Stuff</button>

Javascript

$(".add-more").click(function(){ 
     var html = $(".copy").html();
     $(".after-add-more").after(html);
});

$("body").on("click",".remove",function(){ 
     $(this).parents(".more-duty").remove();
});

$('.try').click(function() {
     alert("Ouch");
});

当我单击生成的输入以便我可以回显 ouch 时，不会调用该事件。请看这个小提琴。任何帮助将不胜感激 。谢谢 。

4

3 回答 3

0 

$(".add-more").click(function() {
  var html = $(".copy").html();
  $(".after-add-more").after(html);
});

$("body").on("click", ".remove", function() {
  $(this).parents(".more-duty").remove();
});
$(document).on("click",'.try',function() {//use .on()
  alert("Ouch");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="after-add-more form-group">
  <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here">
</div>

<!-- Copy Fields -->
<div class="copy hide">
  <div class="form-group more-duty">
    <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here">
    <button class="remove" type="button">Remove Stuff</button>
  </div>
</div>

<button class="add-more" type="button">Add Stuff</button> Javascript

它是动态添加的，所以使用.on()

于 2017-02-16T11:05:25.040 回答
0

$ ( "body" ).on( "click", ".try" , function() {

     alert( " Ouch " );

});

/**这将工作。在您的情况下，它不起作用，因为单击事件未与元素绑定，因为它是在后记*/

于 2017-02-16T11:10:35.427 回答
0

您需要事件委托，就像您为.remove类点击所做的一样，

$("body").on("click", ".remove", function() {
  $(this).parents(".more-duty").remove();
}).on('click', '.try', function() {
  alert("Ouch");
});


$(".add-more").click(function() {
  var html = $(".copy").html();
  $(".after-add-more").after(html);
});

$("body").on("click", ".remove", function() {
  $(this).parents(".more-duty").remove();
}).on('click', '.try', function() {
  alert("Ouch");
});
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="after-add-more form-group">
  <input type="text" name="addmore[]" class="form-control" placeholder="Enter Something here">
</div>

<!-- Copy Fields -->
<div class="copy hide">
  <div class="form-group more-duty">
    <input type="text" name="addmore[]" class="form-control try" placeholder="Enter More stuffs here">
    <button class="remove" type="button">Remove Stuff</button>
  </div>
</div>

<button class="add-more" type="button">Add Stuff</button>

于 2017-02-16T11:01:53.000 回答