Question

我的Bootstrap Toggle有问题。

部分刷新主页后，切换消失，我只看到复选框。

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

<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 -->

以下是我在主页上的代码的一部分：

digraph example {      
    rankdir=LR                                                         
    compound=true;                                                              
    "B" -> "C" [ltail="cluster_s0", lhead="cluster_s1"];              
    "C" -> "DC1" [ltail="cluster_s1", dir=none];     
    DC1[shape=point]
    DC2[shape=point]
    DC1 -> DC2 [dir=none]
    "DC2" -> "D" [lhead="cluster_s1"];              
    subgraph cluster_s0 {                                                       
        "A" -> "B";                                                             
    }                                                                           
    subgraph cluster_s1 {                                                       
        "C" -> "D";         
    }                                                                           
}

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

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
    });
});

javascript刷新后，Bootstrap切换不起作用

1 个答案: