Question

我在将另一个div添加到另一个div中时遇到问题。当我点击添加按钮时，会创建一个没有高度的空div，但是我想要附加包含所有信息的整个div。

 <div class="column column-3-4" id="customFields">
   <div class="row">
      <div class="column-1-1">
         <div class="user_information" style="margin-top:0px;">
            <form  method="post" enctype="multipart/form-data" onSubmit="return ugt_validate_profile();">
               <? include('./includes/error-message3.php');
                  $_SESSION['ERROR_MSG3']=NULL;
                  $_SESSION['WARN_MSG3']=NULL;
                  $_SESSION['SUCCESS_MSG3']=NULL;?>    
               <div class="form-group">
                  <div>
                     <input type="text" name="name" id="name" class="form-control" placeholder=" Enter The Name:" value="<?=(isset($usr_fname))?$usr_fname:NULL; ?>">
                     <label id="name_error" style="display:none"></label>
                  </div>
                  <div style="float:right">
                     <button><a href="javascript:void(0);" class="addCF">Add</a></button>
                  </div>
               </div>
               <div class="form-group">
                  <input  type="file" class="form-control" id="formFileId"  name="uplode_img" placeholder=" Upload The Profile Pic" />
                  <label for="input-placeholder" class="control-label"><strong>Best Resolution :( 320 X 320 ),&nbsp;Size: 1024Kb</strong></label>
               </div>
               <div class="form-group">
                  <input type="text" name="email" id="email" class="form-control" placeholder="Enter Your Email Id:" value="<?=(isset($usr_email))?$usr_email:NULL; ?>">
                  <label id="email_error" style="display:none"></label>
               </div>
               <div class="form-group">
                  <input type="text" name="phone" id="phone" class="form-control" placeholder="Phone No:" value="<?=(isset($usr_mob))?$usr_mob:NULL; ?>" disabled="disabled" readonly>
                  <label id="phone_error" style="display:none"></label>
               </div>
               <div class="form-group">
                  <input type="text" name="address" id="address" class="form-control" placeholder="Address :" value="<?=(isset($usr_address))?$usr_address:NULL; ?>">
                  <label id="phone_error" style="display:none"></label>
               </div>
               <div class="form-group">
                  <button class="more" type="submit" name="profile_submit" value="profile_submit" >Save</button>  
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
</div>

这是用于附加div的jQuery代码。如果我附加一个文本框，那么它工作正常。同时删除链接无法正常工作。如果我点击删除链接，它会转到页面底部。任何帮助将不胜感激。

$(document).ready(function() {
  $(".addCF").click(function() {
    $("#customFields").append('<div id="customFields"></div><a href="javascript:void(0);" class="remCF">Remove</a>');
  });

  $("#customFields").on('click','.remCF',function(){
    $(this).parent().parent().remove();
  });
});

Answer 1

这仅供您参考，因为您可以将此div添加到正文中，现在我只是复制了您的数据并添加了一些东西

$(document).ready(function() {
  $(".addCF").click(function() {
    $("#customFields").append('<div id="customFields"></div><a href="javascript:void(0);" class="remCF">Remove</a>');
  });

  $("#customFields").on('click','.remCF',function(){
    $(this).parent().parent().remove();
  });
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<div id="customFields"></div>
<a href="#" class="addCF">click me</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</body>
</html>

Answer 2

在脚本中试试

$(document).ready(function() {
      $(".addCF").click(function() {
        $("#customFields").append('<div id="rem_butt"><a href="javascript:void(0);" class="remCF">Remove</a></div>');
      });

      $("#customFields").on('click','.remCF',function(){
        $('#formFileId').val('');
        $('#rem_butt').empty();
      });
});

Answer 3

Yoy正在尝试使用相同的ID创建两个元素。

根据MDN

id全局属性定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。

Answer 4

  

  $(document).ready(function() {
  $(".addCF").click(function() {
    $("#customFields").append('<div id="customFields"></div><a href="javascript:void(0);" class="remCF">Remove</a>');
  });
  $("#customFields").on('click','.remCF',function(){
     $(this).remove();//OR
     //$(this).parent().remove();
  });
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="customFields"></div>
<a href="#" class="addCF">click me</a>

Answer 5

您有重复的#!/usr/bin/env perl use warnings; use strict; use XML::Twig; sub insert_merge { my ( $twig, $insert_after ) = @_; my $to_insert = XML::Twig::Elt->new( 'entry', { key => "requestable" } ); $to_insert->insert_new_elt('value')->insert_new_elt( 'Boolean', "true" ); $to_insert->paste( after => $insert_after ); $twig -> flush; } my $twig = XML::Twig->new( twig_handlers => { '//entry[@key="mergeTemplates"]' => \&insert_merge }, pretty_print => 'indented' ); #glob finds files, if you want something more extensive then File::Find::Rule foreach my $filename ( glob ( "/path/to/dir/*xml" ) ) { $twig->parsefile_inplace($filename); }方案，这是不好的。您还要删除无效的id。您新创建的parent也未包含div，因此a会移除remove div，这会破坏您的流量。

＆＃13;

customFields

＆＃13;

$(document).ready(function() {
  $(document).on('click','.addCF',function() {
    $("#customFields").append('<div id="removeContainer"><a href="javascript:void(0);" class="remCF">Remove</a></div>');
  });

  $("#customFields").on('click','.remCF',function(){
    $(this).parent().remove();
  });
});

＆＃13;

无法追加相同的div

5 个答案: