javascript - 功能后的jQuery无法正常工作

我有一个按钮来继续添加新行。但它没有增加。我想最后添加一个新行。我从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>

最佳答案

在您的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>

关于javascript - 功能后的jQuery无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41930596/