以动态形式yii2添加新行，在新行中，js不起作用 [英] Adding new row in dynamic form yii2, in new row, js is not work
问题描述
我有一个案例来管理 yii2 中的动态输入.所以我选择了这个扩展:wbraganca
这是我的代码:
'dynamic-form']);?><div class="row"><div class="col-md-8"><div class="padding-v-md"><div class="line-dashed"></div><?phpDynamicFormWidget::begin(['widgetContainer' =>'dynamicform_wrapper',//必需:只有字母数字字符加_" [A-Za-z0-9_]'widgetBody' =>'.container-items',//必需:css 类选择器'widgetItem' =>'.item',//必需:css 类'限制' =>10,//最大次数，一个元素可以被克隆(默认999)'分钟' =>1,//0 或 1(默认 1)'插入按钮' =>'.add-item',//css 类'删除按钮' =>'.remove-item',//css 类'模型' =>$modelsTransactionDetail[0],'formId' =>'动态形式','formFields' =>['item_id','karyawan_id','harga_jual','jumlah_jual','小计'],]);?><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-money"></i>项目 Pembelian<div class="clearfix"></div>
<div class="panel-body"><!-- widgetContainer --><table class="table table-bordered table-striped container-items"><头><tr><th style="width: 30%">Item</th><th style="width: 15%">By</th><th style="width: 18%">Harga</th><th style="width: 8%">数量</th><th style="width: 25%">Sub Total</th><th class="text-center" style="width: 5%">Act</th></tr></thead>
<?php foreach ($modelsTransactionDetail as $indexTools => $modelTools): ?><tr class="item"><td class="vcenter"><?=$form->field($modelTools, "[{$indexTools}]item_id")->label(false)->dropDownList(ArrayHelper::map(ItemLayanan::find()->all(), 'id', 'nama_item'), ['prompt' =>'选择项目', 'class' =>'item_id'])?></td><td class="vcenter"><?=$form->field($modelTools, "[{$indexTools}]karyawan_id")->label(false)->dropDownList(ArrayHelper::map(Karyawan::find()->all(), 'id', 'nama_karyawan'), ['prompt' =>'选择Karywan'])?></td><td class="vcenter"><?= $form->field($modelTools, "[{$indexTools}]harga_jual")->label(false)->textInput(['maxlength' => true]) ?></td><td class="vcenter"><?= $form->field($modelTools, "[{$indexTools}]jumlah_jual")->label(false)->textInput(['maxlength' => true]) ?></td><td class="vcenter"><?= $form->field($modelTools, "[{$indexTools}]subtotal")->label(false)->textInput() ?></td><td class="text-center vcenter" style="width: 90px;"><button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button></td></tr><?php endforeach;?></tbody><脚><tr><td colspan="5"></td><td><button type="button" class="add-item btn btn-success btn-sm"><span class="fa fa-plus"></span>新建</button></td></tr></tfoot><?php DynamicFormWidget::end();?>
请看上面这段代码:
field($modelTools, "[{$indexTools}]item_id")->label(false)->dropDownList(ArrayHelper::map(ItemLayanan::find()->all(), 'id', 'nama_item'), ['prompt' =>'选择项目', 'class' =>'item_id'])?>问题是，我有一个注册 js，但是为什么这个 js 只工作一次，也就是第一行，当我使用 wbraganca 添加一行时，它在新行中不起作用:
这是我的js
registerJs($js);?>新添加的 DOM 元素未绑定，这就是它不起作用的原因.将 JS 改为
$("body").on("change", ".item_id", function () {I have a case to manage a dynamic input in yii2. So I choose this extension : wbraganca
This is my code :
<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>
<div class="row">
<div class="col-md-8">
<div class="padding-v-md">
<div class="line line-dashed"></div>
</div>
<?php
DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items', // required: css class selector
'widgetItem' => '.item', // required: css class
'limit' => 10, // the maximum times, an element can be cloned (default 999)
'min' => 1, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelsTransactionDetail[0],
'formId' => 'dynamic-form',
'formFields' => [
'item_id',
'karyawan_id',
'harga_jual',
'jumlah_jual',
'subtotal'
],
]);
?>
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-money"></i> Item Pembelian
<div class="clearfix"></div>
</div>
<div class="panel-body"><!-- widgetContainer -->
<table class="table table-bordered table-striped container-items">
<thead>
<tr>
<th style="width: 30%">Item</th>
<th style="width: 15%">By</th>
<th style="width: 18%">Harga</th>
<th style="width: 8%">Qty</th>
<th style="width: 25%">Sub Total</th>
<th class="text-center" style="width: 5%">Act</th>
</tr>
</thead>
<tbody>
<?php foreach ($modelsTransactionDetail as $indexTools => $modelTools): ?>
<tr class="item">
<td class="vcenter">
<?=
$form->field($modelTools, "[{$indexTools}]item_id")->label(false)->dropDownList(
ArrayHelper::map(ItemLayanan::find()->all(), 'id', 'nama_item'), ['prompt' => 'Select item', 'class' => 'item_id']
)
?>
</td>
<td class="vcenter">
<?=
$form->field($modelTools, "[{$indexTools}]karyawan_id")->label(false)->dropDownList(
ArrayHelper::map(Karyawan::find()->all(), 'id', 'nama_karyawan'), ['prompt' => 'Select Karyawan']
)
?>
</td>
<td class="vcenter">
<?= $form->field($modelTools, "[{$indexTools}]harga_jual")->label(false)->textInput(['maxlength' => true]) ?>
</td>
<td class="vcenter">
<?= $form->field($modelTools, "[{$indexTools}]jumlah_jual")->label(false)->textInput(['maxlength' => true]) ?>
</td>
<td class="vcenter">
<?= $form->field($modelTools, "[{$indexTools}]subtotal")->label(false)->textInput() ?>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus-sign"></span></button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button type="button" class="add-item btn btn-success btn-sm"><span class="fa fa-plus"></span> New</button></td>
</tr>
</tfoot>
</table>
</div>
</div>
<?php DynamicFormWidget::end(); ?>
</div>
Please see in this pieces of code above :
<?=
$form->field($modelTools, "[{$indexTools}]item_id")->label(false)->dropDownList(
ArrayHelper::map(ItemLayanan::find()->all(), 'id', 'nama_item'), ['prompt' => 'Select item', 'class' => 'item_id']
)
?>
The question is, I have a register js, but why this js have work only just once, which is the first row, when I adding a row using wbraganca, it not works in new row:
This is my js
<?php
$js = <<<'EOD'
$(".item_id").on('change',function () {
alert();
});
EOD;
$this->registerJs($js);
?>
Newly added DOM element is not bound and this is why it's not working. Change JS to
$("body").on("change", ".item_id", function () {
这篇关于以动态形式yii2添加新行，在新行中，js不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
登录 关闭
