selected-select 無法通過 ajax 從 codeigniter-php 代碼添加新行

Question

我正在執行一個 ajax 腳本，它將視圖加載到 div 中。 該視圖填充了數據庫中的一些下拉列表。 當這個視圖被加載到 div 中時，選擇的選擇不起作用。 如果我嘗試打電話

$('.chosen-select').chosen('destroy');
$('.chosen-select').chosen();

在 ajax 調用的成功塊內，它說：

Uncaught TypeError: $(...).chosen is not a function

如果我們在 ajax 調用 function 塊之外調用這些函數，則不起作用。 下面是我的js

function addnewrow()
{
    $.ajax({
        type: "post",
        url: "<?php echo base_url(); ?>" + "mycontroller/myfunction",
        success: function(res){
            if(res) {
                var list = document.querySelectorAll(".newrow");
                var last = list[list.length - 1];
                last.innerHTML=res; 
                //$('.chosen-select').trigger('chosen:updated');
                var newDiv = document.createElement('div');
                newDiv.setAttribute("class", "newrow");
                newDiv.setAttribute("id", "newrow");
                newDiv.innerHTML = "";
                last.insertAdjacentElement("afterend", newDiv);
            }
        },
        error: function(res, status, error) {
            alert('Please Refresh the page and Try Again.');
        }
    });
}

下面是我的 controller function 准備帶有dropowns的頁面並將結果傳遞給js

public function myfunction()
{
    $data["data1"]=$this->main_model->getdata1();
    $data["data2"]=$this->main_model->getdata2();
    $data["data3"]=$this->main_model->getdata3();
    $this->load->view('myviews/datapage',$data);
}

下面是目標代碼供參考，需要傳遞給js，然后放在newrow里面

<div class="row">
    <br>
    <div class="col-sm-2">

    </div>
    <div class="col-sm-2">
        <label>DATALIST 1</label>
        <?php
            if(isset($data1) && !empty($data1))
            {
                echo '<select class="chosen-select form-control" id="datalist1" name="datalist1[]" data-placeholder="Choose an data item">
                    <option value="">  </option>';
                foreach($data1 as $s)
                {
                    echo '<option value="'.$s->sno.'">'.$s->dataname.'</option>';
                }
                echo '</select>';
            }
        ?>
    </div>
    <div class="col-sm-2" id="itemdetails">
        <!--
            ON SELECTING AN ITEM IN DATALIST1, FETCH SOME DATA FROM DATABASE ABOUT THAT ITEM AND SHOW IT HERE
        -->
    </div>
    <div class="col-sm-1"></div>
    <div class="col-sm-2">
        <label>DATALIST 2</label>
        <?php
            if(isset($data2) && !empty($data2))
            {
                echo '<select class="chosen-select form-control" id="datalist2" name="datalist2[]" data-placeholder="Choose a Data">
                    <option value="">  </option>';
                foreach($data2 as $s)
                {
                    echo '<option value="'.$s->sno.'">'.$s->dataname.'</option>';
                }
                echo '</select>';
            }
        ?>
    </div>
    <div class="col-sm-2">
        <label>DATALIST 3</label>
        <?php
            if(isset($data2) && !empty($data2))
            {
                echo '<select class="chosen-select form-control" id="datalist3" name="datalist3[]" data-placeholder="Choose a Data">
                    <option value="">  </option>';
                foreach($data2 as $s)
                {
                    echo '<option value="'.$s->sno.'">'.$s->dataname.'</option>';
                }
                echo '</select>';
            }
        ?>
    </div>
    <div class="col col-sm-1">
        <br>
        <div class="btn btn-primary btn-block mt-4" name="removerows" onclick="removethisrow(this);"><i class="fa fa-minus" aria-hidden="true"></i></div>
    </div>
</div>

更新我嘗試使用 3.3.1 版本的 JQuery、1.8.7 版本的 selected、4.0.6-rc.0 版本的 select2 代替 selected，我到處都面臨同樣的問題。

Answer 1

嘗試將 setTimeOut() 添加到所選的初始化中，如下所示。

function addnewrow()
{
    $.ajax({
        type: "post",
        url: "<?php echo base_url(); ?>" + "mycontroller/myfunction",
        success: function(res){
            if(res) {
                var list = document.querySelectorAll(".newrow");
                var last = list[list.length - 1];
                last.innerHTML=res; 
                setTimeOut(function() {
                   $('.chosen-select').trigger('chosen:updated');
                }, 1000);
                var newDiv = document.createElement('div');
                newDiv.setAttribute("class", "newrow");
                newDiv.setAttribute("id", "newrow");
                newDiv.innerHTML = "";
                last.insertAdjacentElement("afterend", newDiv);
            }
        },
        error: function(res, status, error) {
            alert('Please Refresh the page and Try Again.');
        }
    });
}