Question

当我单击表单上的添加按钮时，添加的第一个文本字段显示在我的第一个文本字段旁边，而不是出现在下一行。

$(document).ready(function() {
  $("#add").click(function(e) {
    e.preventDefault()
    $("#phrase").append('<div class="row" id="phrase"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="row" id="phrase">
    <input id="field" class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate">
  </div>
  <button class="btn waves-effect waves-light" type="button" name="action" id="add">
    Add
  </button>
</form>

Answer 1

使用Prepend并确保ID是唯一的。

export default class extends Component {
  state = {
  };

  componentDidMount() {
    this.props.handleChange(this.state);
  }

  render() {
    const { categoriesWithSub } = this.props.categoriesWithSub;
    return (
        {categoriesWithSub &&
          categoriesWithSub.map(item => (
            <Tile
              to="./request"
              department={item.catName}
              key={item.id}
            />
          ))}
      </div>
    );
  }
}

export function Tile({ to, department }) {
  return (
    <NavLink to={to} css={tile}>
      {department}
    </NavLink>
  );
}

$(document).ready(function() {
  $("#add").click(function(e) {
    e.preventDefault()
    $("#phrase").prepend('<div class="row" id="phrase"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');
  });
});

Answer 2

您的意思是您希望新输入字段框出现在我想的下一行中。然后您可以尝试包括换行符，如下所示

$("#phrase").append('<br><div class="row" id="phrase"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');

Answer 3

我现在在工作。我要做的就是把div换成另一个div HTML：

<div id="phrases">
            <div class="row" id="phrase1">
                <input id="field" class="input-field col s3" type="text" placeholder="Add Training Phrase"
                    class="validate">
            </div>
        </div>

jQuery：

$(document).ready(function () {
    var counter = 1

    $("#add").click(function (e) { 

        e.preventDefault()
        $("#phrases").append('<div class="row" id="phrase' + counter + '"><input class="input-field col s3" type="text" placeholder="Add Training Phrase" class="validate"></div>');
        counter++
        console.log(counter)
    });
});

附加的文本字段不会移到新行

3 个答案: