Question

我有一个按钮可以继续添加新行。但它没有添加。我想在最后添加一个新行。我在class =“portfolioimgdivnext”中找到了这个问题。请检查以下代码并帮我修复。

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

使用append而不是after。它会起作用

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

在您的after函数中将portfolioimgdivnext替换为portfolioimgdiv现在$('.portfolioimgdiv:last')此选择器按预期正常工作

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

只需在准备好的功能中使用您的点击事件

<强>像： $（文件）。就绪（函数（）{ $（'。addmore_img'）。click（function（）{ $（'。portfolioimgdiv：last'）。after（'此字段是必需的.attach_file此字段是必需的。'）; }）; }）

功能不起作用后的Jquery

3 个答案: