javascript刷新后Bootstrap切换不起作用

Question

我对Bootstrap Toggle有问题。

对主页进行部分刷新后，切换开关消失，并且我仅看到复选框。

我使用以下代码刷新页面：

<script type="text/javascript">
setInterval( function() {
    $('.swcon').load("status/controls.php");   
}, 5000);
</script>

这是我主页上代码的一部分：

<div class="grid-item swcon">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">TOGGLES</h3>
        </div>

        <table class="table table-hover table-condensed small" border="0">
            <tbody>
                <tr>
                    <?php       
                    /* GPIO */
                    $sth = $db->prepare("SELECT * FROM gpio WHERE gpio='$s[gpio]' AND rom='$s[rom]' AND (mode='simple' OR mode='temp' OR mode='moment' OR mode='read' OR mode='day') ");
                    $sth->execute();
                    $gpio = $sth->fetchAll();
                    foreach ($gpio as $g) {
                    ?>
                        <td class="col-md-1">
                            <img src="media/ico/switch-icon.png" alt="" title="<?php if(!empty($s['ip'])){echo "Last IP: ".$s['ip']." GPIO: ".$s['gpio']." Mode: ".$g['mode'];} else {echo "GPIO: ".$s['gpio']." Mode: ".$g['mode'];}?>" />
                        </td>
                        <td class="col-md-1">
                            <a href="index.php?id=view&type=gpio&max=day&single=<?php echo $s['name']?>" class="label <?php echo label($g['status']) ?>" title="Charts" ><?php echo str_replace("_", " ", $s['name'])?></a>
                        </td>
                    <?php
                    /* SIMPLE IP */
                    if(($g['mode']=='simple'&&!empty($s['ip']))||($g['mode']=='temp'&&!empty($s['ip']))) {
                        ?>
                    <td class="col-md-2">
                        <form class="form-horizontal" action="" method="post" style=" display:inline!important;">
                            <input class="checkbox" type="checkbox"  data-toggle="toggle" data-size="mini" onchange="this.form.submit()" name="switch" value="<?php echo $s['tmp'] == '1.0'  ? 'off' : 'on'; ?>" <?php echo $s['tmp'] == '1.0' ? 'checked="checked"' : ''; ?>  />
                            <input type="hidden" name="ip" value="<?php echo $s['ip']; ?>"/>
                            <input type="hidden" name="rev" value="<?php echo $g['rev']; ?>"/>
                            <input type="hidden" name="rom" value="<?php echo $s['rom']; ?>"/>
                            <input type="hidden" name="gpio" value="<?php echo $s['gpio']; ?>"/>
                            <input type="hidden" name="onoff" value="simpleip" />
                        </form>
                    </td>
<!-- Rest of the page not important here -->

如果我手动刷新页面，它会按预期显示。

Answer 1

那是因为BootstrapToggle在初始页面加载时解析页面，以使用[data-toggle="toggle"]查找节点。 因此，当您将新内容加载到页面时，不会自动解析新的DOM结构。 为了将新的复选框初始化为BootstrapToggle对象，必须调用$('[data-toggle="toggle"]').bootstrapToggle(); 在将新内容放入页面后，手动进行。

由于jQuery.load()接受在请求完成后作为其第二个参数执行的回调函数，因此您可以像上面那样实现解决方案：

$('.swcon').load('status/controls.php', function() {
    $('[data-toggle="toggle"]').bootstrapToggle({
        size : 'mini',
        // additional settings if necessary
    });
});