web-dev-qa-db-ja.com

bootstrap Ajaxのロード後にトグルが機能しない

ページにコンテンツを取得するためにajaxロードを使用しています。私はbootstrap 3およびbootstrap toggle。で作業しています。コンテンツがロードされると、bootstrap 3のコンテンツが正常に機能します（パネルpanel-primaryをはっきりと見ることができます。しかし、bootstrapトグルコンテンツが読み込まれません（チェックボックスがいくつか表示されるだけです）。これを機能させる方法を知っている人はいますか？他のトグルスイッチに気をつけていますか？

編集：私はまだbootstrapトグルCSSをAjaxロードされたコードで動作するように切り替えることができないため、イベントバインディングをまだテストしていません。イベントバインディングはCSSとは何の関係もありませんか？

  1. メインのHTMLコードで使用されるスクリプト（ajaxロードを使用するスクリプト）
  2. メインHTMLコード
  3. メインのhtmlコードによってdivにロードされるコード
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

 <!-- Bootstrap Toggle JavaScript -->
<script src="../bower_components/bootstrap-toggle-master/js/bootstrap-toggle.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>

<!-- Custom Domotica JavaScript -->
<script> $(document).ready(function(){
        // Set trigger and container variables
        var trigger = $('#side-menu li ul li a'),
        container = $('#page-wrapper');
        
        // Fire on click
        trigger.on('click', function(){
            
          // Set $this for re-use. Set target from data attribute
          var $this = $(this),
            target = $this.data('target');       
            alert("target: " + target)
          // Load target page into container
          container.load(target + '.html', function (response, status, xhr) {});
          // Stop normal link behavior
          return false;
        });
      });
</script>
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Home automation web page">
  <meta name="author" content="">

  <title>Home</title>

  <!-- Bootstrap Core CSS -->
  <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap toggle -->
  <link href="../bower_components/bootstrap-toggle-master/css/bootstrap-toggle.min.css" rel="stylesheet">

  <!-- MetisMenu CSS -->
  <link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>

<body>

  <div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">Home</a>
      </div>
      <!-- /.navbar-header -->

      <ul class="nav navbar-top-links navbar-right">


        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-bell fa-fw"></i>  <i class="fa fa-caret-down"></i>
          </a>
          <ul class="dropdown-menu dropdown-alerts">
            <li>
              <a href="#">
                <div>
                  <i class="fa fa-comment fa-fw"></i> Failure
                  <span class="pull-right text-muted small">No respons from Controller 1</span>
                </div>
              </a>
            </li>

          </ul>
          <!-- /.dropdown-alerts -->
        </li>
        <!-- /.dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-gear fa-fw"></i>
          </a>
          <!-- /.dropdown-user -->
        </li>
        <!-- /.dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-sign-out fa-fw"></i> 
          </a>
        </li>
        <!-- /.dropdown -->
      </ul>
      <!-- /.navbar-top-links -->

      <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
          <ul class="nav" id="side-menu">
            <li>
              <a href="index"><i class="glyphicon glyphicon-home"></i> House<span class="fa arrow"></span></a>
              <ul class="nav nav-second-level">
                <li>
                  <a href="#">Weather</a>
                </li>
                <li>
                  <a href="#">Energy</a>
                </li>
                <li>
                  <a href="#">Water</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#"><i class="glyphicon glyphicon-star"></i> 1st floor<span class="fa arrow"></span></a>
              <ul class="nav nav-second-level" id="side-menu2">
                <li>
                  <a href="#" data-target="index">Hallway</a>
                </li>
                <li>
                  <a href="#">Main bedroom</a>
                </li>
              </ul>
              <!-- /.nav-second-level -->
            </li>
            <li>
              <a href="#"><i class="glyphicon glyphicon-star"></i> main floor<span class="fa arrow"></span></a>
              <ul class="nav nav-second-level">
                <li>
                  <a href="#">Kitchen</a>
                </li>
                <li>
                  <a href="#">Living room</a>
                </li>
                <li>
                  <a href="#">Garage</a>
                </li>
              </ul>
              <!-- /.nav-second-level -->
            </li>
            <li>
              <a href="#"><i class="glyphicon glyphicon-star"></i> Basement</a> 
              <!-- /.nav-second-level -->
            </li>
            <li>
              <a href="#"><i class="glyphicon glyphicon-tree-deciduous"></i> Garden</a> 
              <!-- /.nav-second-level -->
            </li>
          </ul>
        </div>
        <!-- /.sidebar-collapse -->
      </div>
      <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper">

    </div>
    <!-- /#page-wrapper -->

  </div>
  <!-- /#wrapper -->
</body>

</html>
    <div class="panel panel-primary" id="switchespanel">
          <div class="panel-heading">
            <h3 class="panel-title">Switches</h3>
        </div>
        <div class="panel-body">
            <table class="table">
                <tr>
                    <th>Location</th>
                    <th>State</th>
                </tr>
                <tr>                
                <td>Testswitch0</td>
                    <td>
                        <label>
                            <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini">
                        </label>
                    </td>                 
                </tr>   
            </table>
        </div>
    </div>
javascriptjqueryhtmlajaxtwitter-bootstrap
12
Michvw

Bootstrap-toggle jsファイルとcssファイルの両方を正しくロードしていることを確認してください。具体的には、リンクが指す場所にあることを確認するか、以下にリストされているcdnバージョンを使用します。

_<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
_

パスが間違っているか、jsファイルを完全に含めるのを忘れた場合、コンソールにこの警告が表示されます。そうでない場合、コードは正常に機能します。

動的に読み込まれるコンテンツについて。

最初の要素が機能するのは、htmlが最初にロードされた後、_bootstrap-toggle.min.js_が属性_data-toggle="toggle"_を持つ要素を探し、プラグインを適用する要素に対して.bootstrapToggle()を呼び出すためです。これは、ページが読み込まれたときにのみ発生します。

後でさらにトグルを追加する場合は、.bootstrapToggle()を使用して自分で初期化する必要があります。以下の例を更新して、トグルの動的な追加をシミュレートし、それを行うためのアプローチを説明します。詳細については、コード内のコメントを参照してください。

_      // timeout to simulate ajax
setTimeout(function(){ 
   // add an element dynamically,
  $('.table').append('<tr><td>Testswitch0</td><td><label><input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S2" data-size="mini"></label></td></tr>');
    
    // now that we have dynamically loaded elements
    // we need to initialize any toggles that were added
    // you shouldn't re-initialize any toggles already present
    // but we also do want to have to figure out how to find the ones we added
    // instead, we'll destroy all toggles and recreate all new ones
    $("[data-toggle='toggle']").bootstrapToggle('destroy')                 
    $("[data-toggle='toggle']").bootstrapToggle();
  
}, 2000)
      _
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<div class="panel panel-primary" id="switchespanel">
  <div class="panel-heading">
    <h3 class="panel-title">Switches</h3>
  </div>
  <div class="panel-body">
    <table class="table">
      <tr>
        <th>Location</th>
        <th>State</th>
      </tr>
      <tr>
        <td>Testswitch0</td>
        <td><label>
            <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S0" data-size="mini">
          </label></td>
      </tr>
      <tr>
        <td>Testswitch0</td>
        <td><label>
            <input type="checkbox" data-toggle="toggle" data-onstyle="success" id="S1" data-size="mini">
          </label></td>
      </tr>
    </table>
  </div>
</div>_
11
Wesley Smith