Question

我有一个很小的问题。我有一个输入字段，其中有一个按钮，用于在单击时创建它的实例。启动click事件时一切正常，但是当我定位使用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时，不会调用该事件。请参阅this fiddle。任何帮助将不胜感激。谢谢。

Answer 1

您需要事件委派，与.remove类点击时一样，

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

＆＃13;

$(".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");
});

＆＃13;

.hide {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

$(".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");
});

＆＃13;

<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

＆＃13;

它是动态添加的，因此请使用.on()

Answer 3

$（＆＃34; body＆＃34;）。on（＆＃34; click＆＃34;，＆＃34; .try＆＃34;，function（）{

     alert( " Ouch " );

}）;

/ **这会奏效。在你的情况下它没有工作，因为click事件没有与Element绑定，因为它是在* /

之后生成的

Jquery在after（）事件中定位div

3 个答案: