如何使用jquery创建子窗体

wgmfuz8q 于 2023-03-17 发布在 jQuery

关注(0)|答案(1)|浏览(104)

我正在使用JavaScript/JQuery，现在我有按钮“添加任务”，每当我点击该按钮，然后“多表单”创建与“添加子任务”按钮，但我想添加一件事：
每当我点击任何“添加子任务”，那么另一个窗体应该出现在前面的“主窗体（父窗体）”
下面是我目前的代码：

var count = 0;
$('.buttonClass').click(function() {
  count += 1;

  $("<form name='myform''/>").appendTo('body');
  $("<input placeholder='this is a main task'/>").appendTo('body');
  $("<input type='submit' name='' value='Add subtask'/>").appendTo('body');
  $("<br>").appendTo('body');
  $("</form/>").appendTo('body');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<button class="buttonClass">Add Task</button>

jquery

来源：https://stackoverflow.com/questions/75607129/how-to-create-child-form-using-jquery

1条答案

按热度按时间

atmip9wb1#

我认为您需要类似这样的代码，即“Add subtask”的第二个处理程序，它在当前块之前插入输入：

var count = 0;
$('.addTask').click(function() {
  count += 1;
   $('#taskForms').append($(`
      <li>
        <form>
          <ol class="subtasks"></ol>
          <div>
            <input placeholder='this is a main task'/>
            <button class="addSubtask" type='button'>Add subtask</button>
          </div>
        </form>
      </li>
   `))
});

const subtaskHTML =`
      <li>
        <input placeholder='this is a subtask task'/>
        <button class="prependSubtask" type='button'>Add subtask</button>
      </li>
   `

$('#taskForms').on('click', '.addSubtask', function(){
  $(this).closest('form').find('ol').append($(subtaskHTML))
});

$('#taskForms').on('click', '.prependSubtask', function(){
  $(this).parent().before($(subtaskHTML))
});

ol {
  counter-reset: item;
  list-style: none;
  padding: 0;
}
li {
  display: flex;
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  display: flex;
  align-items: end;
  padding-right: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<ol id="taskForms">
  <button type="button" class="addTask">Add Task</button>
</ol>

赞(0）回复(0）举报 2023-03-17

我来回答

如何使用jquery创建子窗体

1条答案

相关问题

热门标签

最新问答