Question

所以，我正在制作一个基于学校的项目，它必须在javascript和jquery中完成。然而，这些语言对我来说都是新的，所以对我来说这有点困难。我的问题：如何附加我的按钮，以便它可以提交我填写的表格？你无意识地了解它。我希望我的按钮放在绿色按钮旁边，请不要介意红色减号按钮。这是在进行中的事情。 jsfiddle.net/DanDy/hqy73b0h

下面是我想要实现的代码：

function submitCSMBtn(target, i) {
  var submitBtn = $('<button/>', {
 'class': 'btn btn-info fa fa-download',
 'type': 'submit',
 });

return submitBtn;
}

所有代码，以防您需要整体审核：

$(document).ready(function(){
  var id = 0;
  var addOpdracht = $('<a/>', {
   'class': 'btn btn-success',
   'id': 'addOpdracht'
}).on('click', function(){
    $('form').append(getExerciseBlock(id));
    id++;
}).html('<i class="fa fa-plus"></i>');

$('form').append(addOpdracht);
 })



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

 function getExerciseBlock(i){
  var eBlock = $('<div/>',{
 'id': i,
 'class': 'col-md-12, eBlock'
 });

  $(eBlock).append(getAudioBtn(i), getWordInput(i), getWordPartInput(i), 
getAddBtn(eBlock, i));

return eBlock;
 }


function getAudioBtn(id, cValue){
 cValue = cValue || '';
 var audioBtn = $('<a/>', {
                'class': 'btn btn-primary'
            }).html('<i class="fa fa-volume-up"></i>');
 return audioBtn;
   }


  function getWordInput(id, cValue){
    cValue = cValue || '';
    var wInput = $('<input/>', {
                'class': 'form-group form-control',
                'type': 'text',
                'name': 'question_takeAudio_exerciseWord[]',
                'placeholder': 'Exercise',
                'id': 'exerciseGetWordInput'
            })
    return wInput;
  }


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

function submitCSMBtn(target, i) {
 var submitBtn = $('<button/>', {
'class': 'btn btn-info fa fa-download',
'type': 'submit',
});

 return submitBtn;
  }

我正在尝试添加我的提交按钮，因此它将提交表单（必须转到JSON，也许会有不同的方法......只是提供额外的信息）。从我所知道的我应该使用命令.on（'click'，function（））如果没有弄错，它应该进入我的eBlock如果没有弄错，但每当我尝试这个时它会导致我失去功能（例如，添加输入等但我保留了布局）。我一直在环顾四周，以便明确解释on（'click'）函数，因为它对我来说是新的。我发现的是http://api.jquery.com/on/ 不确定这是否相同。所以如果你们能帮助我，那就太好了！

编辑：我的HTML代码也是如此。显然，这也需要，抱歉。注意：我只是将代码从正文转移到正文，而不是将无用的代码放在其中。

<body>
    <div class="container">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="row">
                            <h2 id="exerciseTitleCMS" class="col-md-8 col-sm-7 col-xs-6">CMS</h2>
                                <div class="col-md-offset-2 col-md-2">
                                    <h2>
                                        <select class="languageSelector form-control required" id="languageSelector" ></select>
                                    </h2>
                                </div>
                        </div>
                    </div>      <!-- end of panel-heading -->
                <div class="panel-body">
                    <div class="jumbotron" id="mainList">
                        <form class="container-fluid" action="#" method="POST" required>

                        </form>
                    </div> 
                </div>      <!-- end of panel-body -->          
            </div>      <!-- end panel-primary -->
        </div>      <!--end panel-group -->
    </div>  <!-- end of container-->
 </body>

Answer 1

你做错了。附加对象的方法很少。

而不是：

var submitBtn = '<button class=\'btn btn-info fa fa-download\' type=\'submit\'><button />';

//then you can append the html string to element you want to append:
$('#your_element_ID').append(submitBtn);

最简单的方法是你可以只添加普通的html字符串：

LPTSTR cmdArgs = _T("C:\\Windows\\System32\\cmd.exe PowerShell -Command Add-AppxPackage -Path \"C:\\Users\\TEST2\\abc.appx\" ");

Answer 2

试试这个：

$('<button></button>')
  .addClass('btn-class')
  .attr('type', 'submit')
  .appendTo('form-selector');

但是，您可以将按钮放在HTML表单中，然后在某个事件上以编程方式显示该按钮，而不是动态添加提交按钮：

使用jQuery：

＆＃13;

$(function() {
  $('#submit_button').hide();
  
  $('#show_submit_button').on('click', function() {
    $('#submit_button').show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='my_form' class='my_form_class'>
  <input type='submit' id='submit_button' />
</form>

<button id='show_submit_button'>Show submit button!</button>

＆＃13;

或者使用CSS（和jQuery）：

＆＃13;

$(function() {
  $('#toggle_submit_button').on('click', function() {
    $('#submit_button').toggleClass('hidden_submit_buttton shown_submit_button');
  });
});

＆＃13;

.hidden_submit_button {
  display: none;
 }
 .shown_submit_button {
  display: block;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='my_form' class='my_form_class'>
  <input type='submit' id='submit_button' class='hidden_submit_button' />
</form>

<button id='toggle_submit_button'>Show/Hide submit button!</button>

＆＃13;

如何实现我的按钮？

2 个答案: