无法追加相同的div

我在将另一个div附加到另一个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(); 
    }); 
});

来源

2016-12-07 Rahul Rana

您可以附加与使用ID一个新的div。它可能会造成谜团。 – JazZ

如果我追加一个div与新ID然后我也面临问题。 –

这仅仅是为了您的信息，因为你可以附加这个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>

来源

2016-12-07 12:06:38

脚本

试试这个

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

来源

2016-12-07 12:09:24 rushil

Yoy正尝试创建两个元素s用相同的id。

根据MDN

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

来源

2016-12-07 12:14:45 shek


 

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

来源

2016-12-07 12:15:32

现在删除工作正常，但我仍然无法附加div与所有信息。我想附加与#customfields编号的div与所有information.thank你的帮助。 –

我可以得到解决方案请@Soni Vimal –

我很高兴，因为你仍然存在问题，我可以解决这个问题，但为此我需要访问你的代码。 –

您有重复id情景这是不好的。你也删除无效parent。您新创建的div也不包含a，因此remove将删除customFields div，这会损坏您的流量。

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

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

来源

2016-12-07 12:16:38 ScanQR

无法追加相同的div

回答

相关问题