在動態創建的文件上使用yii2 \ jui小部件

Question

我正在爲yii2中的學習編寫一個項目。我在查看微件時遇到了一個問題。

我有一個輸入描述發票的表單。其中一個輸入用yii2 \ jui中的DataPicker綁定，另一個輸入用yii2 \ jui中的AutoComplete綁定。基本上，代碼如下所示：

$contractors = app\models\Contractor::find() 
->select('contractorId as id, contractorShortName as label, contractorShortName as value') 
->asArray() 
->all(); 
/.../ 

<tr> 
    <td> 
     <?= DatePicker::widget([ 
      'name' => 'costBillDate[]', 
      'language' => 'pl', 
      'dateFormat' => 'yyyy-MM-dd' 
     ]) ?> 
    </td> 
    <td><?= AutoComplete::widget(
      'clientOptions' =>[ 
      'source' => $contractors, 
      'autofill' => 'true', 
      'select' => new JsExpression("function(event, ui) { 
         $($(this).parent().find('input[name=\"contractorId[]\"]')).val(ui.item.id); 
         }") 
     ],]) ?> 
     <?= Html::hiddenInput('contractorId[]', "", []) ?> 
    </td> 
//other inputs 
    <td class="text-center delete"><div class="glyphicon glyphicon-trash"></div></td> 
</tr> 

上面的代碼很簡單，基本可行。因此，在表格下添加了一個按鈕，用於複製表格中的行以將更多文檔信息插入數據庫。併爲每一行添加一個腳本來刪除這一行。

//Dynamically creation of a row 
$this->registerJs('$("#add-bill").on("click",function(){' 
    . '$("#costs-bills").append(\'' 
    . '<tr>' 
    . Html::tag("td", DatePicker::widget([ 
     'name' => 'costBillDate[]', 
     'language' => 'pl', 
     'dateFormat' => 'yyyy-MM-dd' 
    ])) 
    . '<td>' 
    . AutoComplete::widget([ 
     'clientOptions' =>[ 
      'source' => $contractors, 
      'autofill' => 'true', 
      'select' => new JsExpression("function(event, ui) { 
       $($(this).parent().find('input[name=\"contractorId[]\"]')).val(ui.item.id); 
       }") 
      ],]) 
      . Html::hiddenInput('contractorId[]', "", []) 
      . '</td>' 
      . '<td class="text-center delete"><div class="glyphicon glyphicon-trash"></div></td>' 
      . '</tr>' 
      . '\');' 

      //binding function to created span 
      . '$(".delete").on("click",function(){ 
      var $killrow = $(this).parent("tr"); 
      $killrow.addClass("danger"); 
      $killrow.fadeOut(2000, function(){ 
      $(this).remove(); 
      });})' 
      . '}) 
'); 

//Binding delete function to span for static row 
$this->registerJs('$(".delete").on("click",function(){ 
     var $killrow = $(this).parent("tr"); 
     $killrow.addClass("danger"); 
     $killrow.fadeOut(2000, function(){ 
     $(this).remove(); 
     });}) 
'); 

#add-bill是按鈕的ID。

#costs-bills是我在表格中的表格的ID。

以上代碼的影響： - 我可以添加行到表; - 我可以從表中刪除選定的行。

問題： 如果我將該行添加到具有動態創建的輸入的表中，該動態創建的行中的DataPicker和AutoComplete不起作用。它們的行爲與普通的textInputs相同。

我不知道該怎麼做。

Answer 1

問題已解決。正確JS代碼：

$this->registerJs(' 
    $("#add-bill").on("click", function(){ 
     $("#costs-bills").append(\'<tr>' 
     . Html::tag("td", Html::textInput("costBillDate[]","", ['class' => 'dp'])) 
     . '<td>' 
     . Html::textInput("", "", ['class' => 'ac']) 
     . Html::hiddenInput("contractorId[]") 
     . '</td>' 
     . Html::tag("td", Html::tag("div", "", ['class' => 'glyphicon glyphicon-trash']) , ['class' => 'text-center delete']) 
     . '</tr>\'); 
     $(".delete").on("click", function(){ 
      var $killrow = $(this).parent("tr"); 
      $killrow.addClass("danger"); 
      $killrow.fadeOut(2000, function(){ 
       $(this).remove(); 
      }); 
     }); 

     $("#costs-bills .dp").datepicker(); 
     $("#costs-bills .ac").autocomplete(
     { 
      source:' 
      . json_encode($contractors) . ', 
      select: function(event, ui) { 
       $($(this).parent().find(\'input[name="contractorId[]"]\')).val(ui.item.id); 
      } 
     }); 
    }); 

    $(".delete").on("click",function(){ 
     var $killrow = $(this).parent("tr"); 
     $killrow.addClass("danger"); 
     $killrow.fadeOut(2000, function(){ 
     $(this).remove(); 
     }); 
    })' 
); 

編輯：
一些exlanation上面個代碼。我猜想所有的yii2\jui小部件只能在(document).ready()事件之前被調用。如果在加載頁面後調用該小部件，則在JS控制檯中的結果爲ILLEGAL pointer。基本上，yii2\jui是標準jQuery小部件的包裝。

我的問題的解決方案是在JS腳本replece爲#add-bill onClick event線該潔具調用yii2\jui部件與一些calsses（在上面dp的代碼DataPicker輸入，ac用於自動完成輸入）標準文本輸入。當一行輸入被成功添加到DOM中時，我只需要將我的textInputs與datatpicker()和autocomplete()的jQuery方法綁定。

我不確定我的解釋是否正確，但上面的代碼正常工作。

親切的問候，
卡米爾