功能不工作後jquery

Question

我有一個按鈕來不斷添加新行。但它沒有增加。我想在最後添加一個新行。我從class =「portfolioimgdivnext」發現問題請檢查以下代碼並幫助我解決問題。

演示click

$('.addmore_img').click(function() { 
 
    $('.portfolioimgdivnext:last').after('<div class="form-group portfolioimgdivnext width100 hirehide"><div class="socialmediaside2"><input type="text" class="form-control" name="portfolioimgtitle[]" required maxlength="150" placeholder="Image Title" /><label id="portfolioimgtitle[]-error" class="has-error hid" for="portfolioimgtitle[]">This field is required.</label><div class="form-group is-empty is-fileinput width100 martop10"><input class="fileUpload" accept="image/jpeg, image/jpg, image/png, image/gif" name="portfolioimg[]" type="file" value="Choose a file" data-msg-accept="Please upload only jpg, jpeg, png and gif file"><div class="input-group"><input class="form-control" placeholder="Portfolio Image" readonly><span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini" type="button"><i class="material-icons">attach_file</i></button></span></div><label id="portfolioimg[]-error" class="has-error hid" for="portfolioimg[]">This field is required.</label></div></div><div class="removebtnimg"><button type="button" class="btn btn-warning btn-sm remove_field"><span class="glyphicon glyphicon-trash"></span></button></div><div class="upload-demo nopadportfolio"><img alt="your image" class="portimg" src="#"></div></div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<div class="form-group portfolioimgdivnext width100 hirehide"> 
 
    <div class="socialmediaside2"> 
 
    <input type="text" class="form-control" required name="portfolioimgtitle[]" maxlength="150" value="Title" placeholder="Image Title" /> 
 
    <div class="form-group is-empty is-fileinput width100 martop10"> 
 
     <input class="fileUpload" accept="image/jpeg, image/jpg, image/png, image/gif" required name="portfolioimg[]" type="file" data-msg-accept="Please upload only jpg, jpeg, png and gif file" value="Choose a file"> 
 
     <div class="input-group"> 
 
     <input class="form-control" id="uploadre" placeholder="Portfolio Image" readonly> 
 
     <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini" type="button"><i class="material-icons">attach_file</i></button></span> 
 
     </div> 
 
     <label id="portfolioimg[]-error" class="has-error hid" for="portfolioimg[]">This field is required.</label> 
 
    </div> 
 
    </div> 
 
    <div class="removebtnimg"> 
 
    <button type="button" class="btn btn-default btn-sm bckbtn addmore_img"><span class="glyphicon glyphicon-plus"></span> 
 
    </button> 
 
    </div> 
 
    <div class="upload-demo nopadportfolio"> 
 
    <img alt="your image" class="portimg" src="#"> 
 
    </div> 
 
</div>

Answer 1

在after功能只需更換portfolioimgdivnext類portfolioimgdiv現在$('.portfolioimgdiv:last')這個選擇正確工作按預期

$('.addmore_img').click(function() { 
 
$('.portfolioimgdiv:last').after('<div class="form-group portfolioimgdiv width100 hirehide"><div class="socialmediaside2"><input type="text" class="form-control" name="portfolioimgtitle[]" required maxlength="150" placeholder="Image Title" /><label id="portfolioimgtitle[]-error" class="has-error hid" for="portfolioimgtitle[]">This field is required.</label><div class="form-group is-empty is-fileinput width100 martop10"><input class="fileUpload" accept="image/jpeg, image/jpg, image/png, image/gif" name="portfolioimg[]" type="file" value="Choose a file" data-msg-accept="Please upload only jpg, jpeg, png and gif file"><div class="input-group"><input class="form-control" placeholder="Portfolio Image" readonly><span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini" type="button"><i class="material-icons">attach_file</i></button></span></div><label id="portfolioimg[]-error" class="has-error hid" for="portfolioimg[]">This field is required.</label></div></div><div class="removebtnimg"><button type="button" class="btn btn-warning btn-sm remove_field"><span class="glyphicon glyphicon-trash"></span></button></div><div class="upload-demo nopadportfolio"><img alt="your image" class="portimg" src="#"></div></div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="form-group portfolioimgdiv width100 hirehide"> 
 
    <div class="socialmediaside2"> 
 
    <input type="text" class="form-control" required name="portfolioimgtitle[]" maxlength="150" value="<?php echo set_value('portfolioimgtitle'); ?>" placeholder="Image Title" /> 
 
    <div class="form-group is-empty is-fileinput width100 martop10"> 
 
     <input class="fileUpload" accept="image/jpeg, image/jpg, image/png, image/gif" required name="portfolioimg[]" type="file" data-msg-accept="Please upload only jpg, jpeg, png and gif file" value="Choose a file"> 
 
     <div class="input-group"> 
 
      <input class="form-control" id="uploadre" placeholder="Portfolio Image" readonly> 
 
      <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini" type="button"><i class="material-icons">attach_file</i></button></span> 
 
     </div> 
 
     <label id="portfolioimg[]-error" class="has-error hid" for="portfolioimg[]">This field is required.</label> 
 
    </div> 
 
    </div> 
 
    <div class="removebtnimg"> 
 
     <button type="button" class="btn btn-default btn-sm bckbtn addmore_img"><span class="glyphicon glyphicon-plus"></span></button> 
 
    </div> 
 
    <div class="upload-demo nopadportfolio"> 
 
     <img alt="your image" class="portimg" src="#"> 
 
    </div> 
 
</div>

Answer 2

使用附加，而不是之後。它會工作

$('.addmore_img').click(function() { 
 
    $('.portfolioimgdiv').append('<div class="form-group portfolioimgdivnext width100 hirehide"><div class="socialmediaside2"><input type="text" class="form-control" name="portfolioimgtitle[]" required maxlength="150" placeholder="Image Title" /><label id="portfolioimgtitle[]-error" class="has-error hid" for="portfolioimgtitle[]">This field is required.</label><div class="form-group is-empty is-fileinput width100 martop10"><input class="fileUpload" accept="image/jpeg, image/jpg, image/png, image/gif" name="portfolioimg[]" type="file" value="Choose a file" data-msg-accept="Please upload only jpg, jpeg, png and gif file"><div class="input-group"><input class="form-control" placeholder="Portfolio Image" readonly><span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini" type="button"><i class="material-icons">attach_file</i></button></span></div><label id="portfolioimg[]-error" class="has-error hid" for="portfolioimg[]">This field is required.</label></div></div><div class="removebtnimg"><button type="button" class="btn btn-warning btn-sm remove_field"><span class="glyphicon glyphicon-trash"></span></button></div><div class="upload-demo nopadportfolio"><img alt="your image" class="portimg" src="#"></div></div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
<div class="form-group portfolioimgdiv width100 hirehide"> 
 
    <div class="socialmediaside2"> 
 
    <input type="text" class="form-control" required name="portfolioimgtitle[]" maxlength="150" value="Title" placeholder="Image Title" /> 
 
    <div class="form-group is-empty is-fileinput width100 martop10"> 
 
     <input class="fileUpload" accept="image/jpeg, image/jpg, image/png, image/gif" required name="portfolioimg[]" type="file" data-msg-accept="Please upload only jpg, jpeg, png and gif file" value="Choose a file"> 
 
     <div class="input-group"> 
 
     <input class="form-control" id="uploadre" placeholder="Portfolio Image" readonly> 
 
     <span class="input-group-btn input-group-sm"><button class="btn btn-fab btn-fab-mini" type="button"><i class="material-icons">attach_file</i></button></span> 
 
     </div> 
 
     <label id="portfolioimg[]-error" class="has-error hid" for="portfolioimg[]">This field is required.</label> 
 
    </div> 
 
    </div> 
 
    <div class="removebtnimg"> 
 
    <button type="button" class="btn btn-default btn-sm bckbtn addmore_img"><span class="glyphicon glyphicon-plus">Add More</span> 
 
    </button> 
 
    </div> 
 
    <div class="upload-demo nopadportfolio"> 
 
    <img alt="your image" class="portimg" src="#"> 
 
    </div> 
 
</div>

Answer 3

只需使用點擊事件在準備功能

像： $（文件）。就緒（函數（）{$ （）點擊（函數（）{$ （ '」 addmore_img。'。 .portfolioimgdiv：last'）。after（'This field is required.attach_fileThis field is required。'）; }）; }）