Question

我有以下jQuery和HTML代码

＆＃13;

var i = 2;
$('#addbtn').click(function() {
  i = i + 1;
  $('#options').append('<label for="' + i + '" class="black-text">' + i + '.</label><input id="' + i + '" type="text">');
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="options" class="row">
  <label for="1" class="black-text">1.</label>
  <input id="1" type="text">
  <label for="2" class="black-text">2.</label>
  <input id="2" type="text">
</div>

<button id="addbtn" class="btn-floating btn-large waves-effect waves-light blue" style="font-size:20;" href="" onclick="return false;"><i class="material-icons">add</i></button>

＆＃13;

我想点击添加按钮时附加更多选项。但是我无法弄清楚这段代码中有什么问题。当我第一次点击添加按钮时，附加文本出现在页面的右上角（与选项2下方不同），当我一直点击按钮时，附加文本最终会向左移动。希望问题很清楚。感谢。

Answer 1

您可以添加div标签

var i = 2;
$('#addbtn').click(function() {
  i = i + 1;
  $('#options').append('<div><label for="' + i + '" class="black-text">' + i + '.</label><input id="' + i + '" type="text"></div>');
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="options" class="row">
  <div><label for="1" class="black-text">1.</label>
  <input id="1" type="text"></div>
  <div><label for="2" class="black-text">2.</label>
  <input id="2" type="text"></div>
</div>

<button id="addbtn" class="btn-floating btn-large waves-effect waves-light blue" style="font-size:20;" href="" onclick="return false;"><i class="material-icons">add</i></button>

使用jQuery的附加文本没有以正确的格式显示

1 个答案: