Jquery after function is not working

Question

I have a button to keep adding new rows. But its not adding. I want to add a new row in the end. I found the issue from class="portfolioimgdivnext" Please check the below code and help me to fix.

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

If you want the last element, you can use this instead, `$('.portfolioimgdiv').last()` — abhishekkannojia, Jan 30 '17 at 07:14
Created a snippet for you. It seems to work once I removed the PHP from the input field. Perhaps you need to wrap your event handler in `$(function() { ... }):` to have the DOM ready when you use it — mplungjan, Jan 30 '17 at 07:17
Learn [Event Delegation](http://learn.jquery.com/events/event-delegation/) — Satpal, Jan 30 '17 at 07:18
@Alexandru-IonutMihai see this is not working properly. Add two three new rows and check. It adding a new row in between two divs. I need the new row at last. — user7152572, Jan 30 '17 at 07:18
@Alexandru-IonutMihai thanks its working http://jsfiddle.net/vo1npqdx/172/ — user7152572, Jan 30 '17 at 07:33

score 0 · Answer 1 · answered Jan 30 '17 at 07:23

Use append instead of after. it will work

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

score 0 · Accepted Answer · answered Jan 30 '17 at 07:25

in your after function just replace class portfolioimgdivnext to portfolioimgdiv now $('.portfolioimgdiv:last') this selector works properly as per expected

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

score 0 · Answer 3 · answered Jan 30 '17 at 07:28

0

just use your click event in ready function

Like: $(document).ready(function(){ $('.addmore_img').click(function() { $('.portfolioimgdiv:last').after('This field is required.attach_fileThis field is required.'); }); })

answered Jan 30 '17 at 07:28

Kamal Ali

56
2

Jquery after function is not working

3 Answers3