Question

当静态创建表时，切换功能可以工作，但是当按钮点击动态创建并且动态数据的ajax加载时 - 切换不起作用。

尝试在其他链接中销毁bootstrap切换并再次添加，但没有用 - 包括bootstrap-toggle.min.js和css

Javascript文件：

$(document).ready(function() {
    $('[data-toggle="toggle"]').change(function(){
        $(this).parents().next('.hide').toggle();
    });
    $("#ViewSegments").submit(function(event) {
        event.preventDefault();
        segment.ViewSegmentTestBuild(); 
    });     
});

function ViewSegmentTestBuild(){
    var  row = '';
//  row = row + '<table id=\'segInfoTable\' class=\'table table-striped table-bordered table-hover\'>';
//  row = row + '<thead>';
//  row = row + '<tr>';
//  row = row + '<th> Destination </th>';
//  row = row + '<th> Seg Id </th>';
//  row = row + '<th> Name </th>';
//  row = row + '<th> Description </th>';
//  row = row + '</tr>';
//  row = row + '</thead>';
    row = row + '<tbody class=\'labels\'>';
    row = row + ' <tr>';
    row = row + '<td colspan=\'4\' >';
    row = row + ' <label for=\'ia-preprod\'>ia-preprod</label>';
    row = row + '<input type=\'checkbox\' name=\'ia-preprod\' id=\'ia-preprod\' data-toggle=\'toggle\'> </input>';
    row = row + '</td>';
    row = row + '</tr>';
    row = row + '</tbody>';
    row = row + '<tbody class=\'hide\'>'
    row = row + '<tr>';
    row = row + '<td>ia-preprod</td>';
    row = row + '<td>9255074</td>';
    row = row + '<td>IA WWW HP Visitors</td>';
    row = row + '<td>IA WWW HP Visitors</td>';
    row = row + '</tr>';
    row = row + '<tr>';
    row = row + '<td>ia-preprod</td>';
    row = row + '<td>9255077</td>';
    row = row + '<td>IA WWW Prospect</td>';
    row = row + '<td>IA WWW Prospect</td>;'
    row = row + '</tr>';
    row = row + '</tbody>';
    row = row + '<tbody class=\'labels\'>';
    row = row + '<tr>';
    row = row + ' <td colspan=\'4\' >';
    row = row + '<label for=\'tnl-prod\'>tnl-prod</label>';
    row = row + '<input type=\'checkbox\' name=\'tnl-prod\' id=\'tnl-prod\' data-toggle=\'toggle\'> </input>';
    row = row + '</td>';
    row = row + '</tr>';
    row = row + '</tbody>';
    row = row + '<tbody class=\'hide\'>';
    row = row + '<tr>';
    row = row + '<td>tnl-prod</td>';
    row = row + '<td>6096032</td>';
    row = row + '<td>All UDO traits</td>';
    row = row + '<td>All UDO traits</td>';
    row = row + '</tr>';
    row = row + '<tr>';
    row = row + '<td>tnl-prod</td>';
    row = row + '<td>7196990</td>';
    row = row + '<td>All WWW Users</td>';
    row = row + '<td>All WWW Users</td>';
    row = row + '</tr>';
    row = row + '<tr>';
    row = row + '<td>tnl-prod</td>';
    row = row + '<td>7196992</td>';
    row = row + '<td>All DCT Users</td>';
    row = row + ' <td>All DCT Users</td>';
    row = row + '</tr>';
    row = row + '<tr>';
    row = row + '<td>tnl-prod</td>';
    row = row + '<td>7331685</td>';
    row = row + '<td>All Homepage Users</td>';
    row = row + '<td>All Homepage Users</td>';
    row = row + '</tr>';    
    row = row + '</tbody>';
//  row = row + '</table>'; 

    console.log(row);
    $('#segInfoTable').append(row);     
    $("[data-toggle='toggle']").bootstrapToggle('destroy')                 
    $("[data-toggle='toggle']").bootstrapToggle();     
    $("[data-toggle='toggle']").bootstrapSwitch('state', true);    

    $("#segInfoTable").css("display", "");

}

HTML：

// Libraries -used，添加此bootstrap-toggle.min.css以尝试销毁并重新创建切换

<link th:href="@{/css/google.css}" rel="stylesheet" type="text/css" />
<link th:href="@{/css/app.css}" rel="stylesheet" type="text/css" media="screen" />
<link th:href="@{/css/bootstrap.css}" rel="stylesheet" type="text/css" media="screen" />
<link th:href="@{/css/bootstrap-toggle.min.css}" rel="stylesheet" type="text/css" media="screen" />

<script th:src="@{/js/lib/jquery-3.2.1.js}"></script>
<script th:src="@{/js/lib/bootstrap.js}"></script>
<script th:src="@{/js/lib/bootstrap-toggle.min.js}"></script>


<style>
       #segInfoTable th{
            background: #3498db; 
            color: white; 
            font-weight: bold; 
       }

    .labels tr td {
        background-color: #2cc16a;
        font-weight: bold;
        color: #fff;
    }

</style>

        <aside class="search col-sm-2">
            <button 
                type="submit" 
                th:onclick="'ViewSegmentTestBuild();'" 
                value="Submit" 
                class="btn btn-primary mb-2">Submit
            </button>
        </aside>

    <div class="row">

        <table id='segInfoTable' class='table table-striped table-bordered table-hover'>
            <thead><tr><th> Destination </th><th> Seg Id </th><th> Name </th><th> Description </th></tr></thead>
        </table>table>


    </div>

Answer 1

$(document).on('change', '[data-toggle="toggle"]', function(){
    $(this).parents().next('.hide').toggle();
});

始终从文档开始。通过这种方式，您可以使事件与动态元素一起使用。

动态加载后jquery引导程序切换不起作用

1 个答案: