Question

我正在使用Ajax和Bootstrap toogle，并尝试当我在我的index.php中单击一行以使用Ajax加载option.php时尝试。第一次，Bootstrap toogle似乎可以正常运行并切换，但是当我单击另一行时，无法切换。这是我的index.php代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>

<body>
    <div class="card">
        <div class="card-header">Table</div>
        <div style="height:280px;" class="card-body">
            <div class="overflow">
                <table id="tablaPisos" class="table" data-click-to-select="true" data-single-select="true"
                    data-toggle="tablaPisos">
                    <thead class="thead-light">
                        <tr>
                            <th colspan="1">Col1</th>
                            <th colspan="2">Col2</th>
                            <th colspan="2">Col3</th>
                            <th colspan="2">Col4</th>
                            <th colspan="2">Col5</th>
                        </tr>

                    </thead>
                    <tr>
                        <td colspan="1">1</td>
                        <td colspan="2">1</td>
                        <td colspan="2">1</td>
                        <td colspan="2">1</td>
                        <td colspan="2">1</td>
                    </tr>
                    <tr>
                        <td colspan="1">2</td>
                        <td colspan="2">2</td>
                        <td colspan="2">2</td>
                        <td colspan="2">2</td>
                        <td colspan="2">2</td>
                    </tr>
                    <tr>
                        <td colspan="1">3</td>
                        <td colspan="2">3</td>
                        <td colspan="2">3</td>
                        <td colspan="2">3</td>
                        <td colspan="2">3</td>
                    </tr>
            </table>
            </div>
        </div>

    </div>

    <script>
        $(document).on('click', '#tablaPisos tr', function(event){
            var value="1212";
            var video="Yes";
            $.ajax({
                   type: 'GET',
                    url: 'option.php',
                           data: {name: value, generado: video},
                            success: function(data) {
                                //$("#imageContainer").append(data);
                                $("#imageContainer").html(data);


                            }, error: function (xhr, ajaxOptions, thrownError) {
                                    alert(xhr.status);
                                    alert(thrownError);
                                }

                        });
        });
    </script>

<div class="card">
                <div class="card-header">Image</div>
                <div class="card-body">
                     <div id ="imageContainer" class="overflow">

                    </div>
                 </div>
                </div>
</body>

</html>

当我在Ajax上使用Get form时，它会加载option.php：

    <?php
    echo"It works";
?>

<head>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <style>
    ul{list-style:none}

    </style>
</head>
<script>
$(document).ready(function () {
        $("#sortable1").sortable({
        stop: function (event, ui) {
        },
        update: function(event, ui) {
            var counter = 1;
            $('input[name="checkImg"]').each(function () {
                $(this).attr('posicion', counter);

            });
        }
        }).disableSelection();
        });

</script>

<ul class="justify-content-center col-11 connectedSortable" id="sortable1">
<div style="border:solid border-width: 1px;">
        <li name="list" class="ui-state-default">
            <input type="checkbox" id="input1" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"

            data-onstyle="success" data-offstyle="danger" >
             Image </li>


    </div>
    <div style="border:solid border-width: 1px;">
        <li name="list" class="ui-state-default">
            <input type="checkbox" id="input2" name="checkImg" data-height="10" data-toggle="toggle" data-size="mini"

            data-onstyle="success" data-offstyle="danger" >
             Image 2 </li>


    </div>

</ul>

图片：

欢迎您的帮助，谢谢。

Ajax请求后，Bootstrap Toogle失败

0 个答案: