使用javascript动态创建输入字段 - Create input field dynamically using javascript

我使用yii2框架工作，根据用户提供的输入，我想创建input字段。使用一些像这样的在线文档，我尝试过这样做，但问题是我的button点击事件没有拾取jquery

这里有一个jsfiddle。不能完全复制我的问题，但我想要的是，如果用户在输入字段中输入3，那么点击按钮就会生成3字段。

这是我的view代码

<div class="event-form">
<?php $form = ActiveForm::begin(['id'=>'form-event']); ?>  
<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>
<div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-4">
        <?= $form->field($model, 'start_date')->widget(
            DatePicker::className(), [
            'name' => 'start_date',
            'options' => ['placeholder' => 'Select Event start date ...'],
            'convertFormat' => true,
            'pluginOptions' => [
                'orientation' => 'bottom left',
                'format' => 'MM/dd/yyyy',
                'startDate' => date('dd-MM-yyyy'),
                'autoclose' => true,
                'todayHighlight' => true
            ]
        ])
        ?>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-4">
        <?= $form->field($model, 'end_date')->widget(
            DatePicker::className(), [
            'name' => 'end_date',
            'options' => ['placeholder' => 'Select Event end date...'],
            'convertFormat' => true,
            'pluginOptions' => [
                'orientation' => 'bottom left',
                'format' => 'MM/dd/yyyy',
                'startDate' => date('dd-MM-yyyy'),
                'autoclose' => true,
                'todayHighlight' => true
            ]
        ])
        ?>
    </div>
    <div class="col-lg-4 col-sm-4 col-xs-4">
        <button type="button" id="setdates" class="btn btn-default btn-set-dates">Set Dates</button>
    </div>
</div>
<p></p>
<p></p>
<div class="form-group hide" id="optionTemplate">
    <div class="col-xs-offset-3 col-xs-5">
        <input class="form-control" type="text" name="option[]" />
    </div>
</div>
<div class="form-group">
    <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-danger' : 'btn btn-primary']) ?>
</div>
<?php ActiveForm::end(); ?>

这是我使用的javascript

$('#setdates').click(function() {
startDate = new Date(document.getElementById('event-start_date').value);
endDate = new Date(document.getElementById('event-end_date').value);
var dates = [],
    currentDate = startDate,
    addDays = function(days) {
        var date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
    };
while (currentDate <= endDate) {
    dates.push(currentDate);
    currentDate = addDays.call(currentDate, 1);
  }
});
$(document).ready(function() {
  var MAX_OPTIONS = 5;
  $('#form-event')
    .on('click', '.setdates', function() {
        var $template = $('#optionTemplate'),
            $clone    = $template
                .clone()
                .removeClass('hide')
                .removeAttr('id')
                .insertBefore($template),
            $option   = $clone.find('[name="option[]"]');
    })
    // Called after adding new field
    .on('added.field.fv', function(e, data) {
        if (data.field === 'option[]') {
            if ($('#event-form').find(':visible[name="option[]"]').length >= MAX_OPTIONS) {
            }
        }
    })
});

所以我必须为dates次生成输入字段。

HTML:

<a id="add">Add More</a>

JavaScript:

var i = 1;
$("#add").click(function(){
                var appendFields = '<tr>';
                appendFields += '<td><select id="dropdown_'+i+'" name="dropdown_name[]"><option value="1">One</option></select></td>';
                appendFields += '<td><a style="color: red; cursor: pointer;" class="remCF">Remove</a></td>';
                appendFields += '</tr>';
                $("#table_id").append(appendFields);
                i++;
            });
            $("#table_id").on('click','.remCF',function(){
                $(this).parent().parent().remove();
            });
        });

可能是您的js文件将过期时文档还没有准备好。将"#form event"替换为"document"请确保".setdates"这个类不会用于其他dom。如果你使用这个类，这个点击将发生在每个有".setddates"类和#setdates 的dom

$(document).on('click','#setdates',(function() {});

 $(document)
    .on('click', '.setdates', function() {
        var $template = $('#optionTemplate'),
            $clone    = $template
                .clone()
                .removeClass('hide')
                .removeAttr('id')
                .insertBefore($template),
            $option   = $clone.find('[name="option[]"]');
    })

我发布的示例代码可能会对您有所帮助。您可能需要根据使用需要对其进行修改。

HTML

<input type="text" id="numPpl" name="numPpl">
<br><br>
<div id="demo">
</div>

JQuery

<script>
    $('#numPpl').blur(function()
    {
        for(i=1; i<=$('#numPpl').val(); i++)
        {
            $('#demo').append('<input type="text"><br><input type="text"><br><br>');
        }
    });
</script>

Fiddle