Question

我有一个应用程序，可以动态添加输入字段。但是我的按钮仍留在原处，并在其下方创建2个输入字段。

我想尝试实现的目标是：添加输入字段时，我希望按钮位于输入字段下方。

这是创建按钮的功能。

function getAddBtn(target, i){
 var addBtn = $('<a/>', {
                'class': 'btn btn-primary',
                'id': 'addBtn'
            }).on('click', function(){
 if($('.syllable',target).length>3)
      return false;
 $(target).append(getWordPartInput(i));
}).html('<i class="fa fa-plus"></i>');
            console.log(target);
 return addBtn;
}

这是创建输入字段的函数：

function getWordPartInput(id, cValue){
 cValue = cValue || '';
 var wpInput = $('<input/>', {
'class': 'form-group form-control syllable',
'type': 'text',
'value': cValue,
'placeholder': 'Syllables',
'name': 'Syllablescounter['+ SyllablesID++ +']'
 });
  return wpInput;
}

https://jsfiddle.net/StackOverflowAccount/sa2eowhh/21/的小提琴供您自己尝试并明白我的意思。单击绿色的添加按钮，然后看到2个按钮，一个+按钮和一个-按钮。单击蓝色按钮，您将看到输入字段如何跳到按钮下方，而不是在它们之间添加。我正在尝试将输入字段保持在彼此下方，而不是在它们之间使用按钮。

提前谢谢。

Answer 1

只需替换方法function action<F extends { type : string, payload : any} & { [P in Exclude<keyof F, 'type' | 'payload'>]: never }>(type: string, payload: any): F { return { type, payload } as any; } const Login = (credentials: credentials) => action<Login>(LOGIN_REQUEST, credentials); action<{ type: string; payload: any; otherMandatoryProp: boolean }>(LOGIN_REQUEST, {}) // invalid call中的行即可完成。

将getAddBtn替换为$(target).append(getWordPartInput(i));

有关更多信息，请参见insertBefore in jQuery

编辑：Updated Fiddle

Answer 2

$(document).ready(function() {
  var id = 0;
  var addOpdracht = $('<a/>', {
    'class': 'btn btn-success',
    'id': 'addOpdracht'
  }).on('click', function() {
    $('#my_form').prepend(getExerciseBlock(id));
    $(".exerciseGetWordInput_" + id).focus().select();
    id++;
    exerciseAudioInput++;
  }).html('<i class="fa fa-plus fa-2x"></i>');

  $('#my_form').append(addOpdracht);
  $('#my_form').append(getExerciseTitle());
});

在另一个元素之前添加元素

2 个答案: