jquery 加载后 Select2 不起作用

Question

我遇到了这个无法解决的问题。我所做的一切都行不通。我使用很多表单，所以我决定为每个表单创建一个 php 文件，然后使用 ajax 加载调用该表单。

Js文件：

$('#firstForm').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url : "includes/firstform.inc.php",
        type: "POST",
        data: $(this).serialize(),
        success: function (data) {
        $('.content-container').load('forms/zipscreens-form.php');

        },
        error: function (jXHR, textStatus, errorThrown) {

        }
    });
});

HTML 容器：

<div class="content-container">
// in this div the form will be stored.
</div>

选择表格：

<select class="js-example-basic-single" name="selectWidth">
  <?php 
   for ($row = 1; $row <= $lastRow; $row++) {
    echo "<option value='AL'>"; echo $worksheet->getCell('A'.$row)->getValue(); echo "</option>'";
   }
  ?>
</select>

为什么这不起作用？

Answer 1

您需要初始化 select2()。您可以在加载调用完成后执行此操作。所以，而不是：

$('.content-container').load('forms/zipscreens-form.php');

使用 ..

$( ".content-container" ).load( "forms/zipscreens-form.php", function() {
    $(".js-example-basic-single").select2();
});