Question

再次寻求关于如何使用jquery删除动态元素的专家意见？我目前正在开发一个php页面，其中的表单包含添加和删除新部分的功能。现在我在尝试使用jquery删除新添加的部分时遇到问题。因为超链接没有被触发。

HTML页面：

  <div class="form-group">
    <label class="control-label col-md-4">File upload</label>
    <div class="col-md-6">
      <input type="file" />
      <textarea required placeholder="Description of the document" class="form-control" name="description-of-incident" id="description-of-incident" rows="2"></textarea>
      <div class="help-block with-errors"></div><br />
      <a href="javascript:void(0);" id="addanother">Add another</a>
    </div>
  </div>

<div id="container">
</div>

这是我使用的jquery：

  $(document).ready(function() {
      $('input[type="radio"]').click(function() {
             if($(this).attr('id') == 'peopleinvolvedyes') {
                  $('#involvement-section').show();
             }

             else {
                  $('#involvement-section').hide();
             }
         });

      $("#addanother").click(function(){
        $("#container").append('<div class="form-group"><label class="control-label col-md-4">File upload</label><div class="col-md-6"><input type="file" /><textarea required placeholder="Description of the document" class="form-control" name="description-of-incident" id="description-of-incident" rows="2"></textarea><div class="help-block with-errors"></div><a href="javascript:void(0);" class="remove-document-upload">Remove</a></div></div>');
      });

      $(".remove-document-upload").click(function(){
          alert("dasdasdas");
        //$(this).closest('.addanother').remove();
      });


  });

无论何时，我都会点击“删除”＃39;超链接，jquery函数不会被触发。

赞赏意见和建议。

谢谢， Nhoyti

Answer 1

FIDDLE

$(document).on('click', ".remove-document-upload", function() {
    alert("dasdasdas");

});

为动态创建的元素使用事件委托。

.on()文档为here

Answer 2

而不是直接点击使用

$(".remove-document-upload").click(function(){
    alert("dasdasdas");
    //$(this).closest('.addanother').remove();
});

这里您不需要使用直接文档。您可以使用任何父元素在文档加载时加载的选择器

如何使用jquery

2 个答案: