Question

我正在使用yii2框架，并根据用户提供的输入创建input字段。使用一些在线文档like this我试图这样做，但问题是我的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次生成输入字段。

Answer 1

<强> 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();
            });

        });

Answer 2

可能是你的文件没有准备好你的js文件将会存在。用“文档”替换“＃form-event” 确保“.setdates”这个类不会用于其他dom，如果你使用这个类，那么对于每个拥有“.setdates”类和#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[]"]');

    })

Answer 3

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

HTML

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

JQuery

class BMI():
    def __init__(self,name=str,age=int,weight=float,height=float):
        self.__name=name
        self.__age=age
        self.__weight=weight
        self.__height=height
    def get__BMI(self):
        return self.__BMI
    def get__Status(self):
        return self.__Status
    def get__Name(self):
        return self.__Name
    def get__Age(self):
        return self.__Age
    def get__Weight(self):
        return self.__Weight
    def get__Height(self):
        return self.__Height

<强> Fiddle

使用javascript动态创建输入字段

3 个答案: