Question

我正在通过ajax加载此切换html并在页面中加载此开关并尝试启用/禁用该产品的状态。但是，当我通过ajax调用它时，它无效。

Answer 1

在从ajax成功响应后，您必须初始化切换代码。

所有绑定到该开关的事件必须在ajax响应之后完成，因为您正在动态添加内容，因此您需要重新初始化该开关的所有内容

Answer 2

我一周前遇到同样的问题。我解决了以下问题。希望以下代码可以帮助你。

test.php的

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
    <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>
    <script src="http://malsup.github.com/jquery.form.js"></script> 


  </head>
  <body>
    <form id="myForm" name="myForm" action="audio_alarm.php" method="post"> 
      <input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
    </form>
    <br><br>
    <div class="panel panel-default">
    <div class="panel-heading" id="heading"></div>
    <div class="panel-body" id="body"></div>
  </div>
    <div></div>
    <script>
      $('#toggle').change(function(){
        var mode= $(this).prop('checked');
        // // submit the form 
        // $(#myForm).ajaxSubmit(); 
        // // return false to prevent normal browser submit and page navigation 
        // return false; 
        $.ajax({
          type:'POST',
          dataType:'JSON',
          url:'audio_alarm.php',
          data:{mode:mode},
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
            $("#heading").html(success);
            $("#body").html(message);
          }
        });
      });
    </script>
  </body>
  </html>

并且

audio_alarm.php

<?php

$mode=$_POST['mode'];

if ($mode=='true') //mode is true when button is enabled 
{
    //Retrive the values from database you want and send using json_encode
    //example
    $message='Hey my button is enableed!!';
    $success='Enabled';
    echo json_encode(array('message'=>$message,'$success'=>$success));
}

else if ($mode=='false')  //mode is false when button is disabled
{
    //Retrive the values from database you want and send using json_encode
    //example
    $message='Hey my button is disable!!';
    $success='Disabled';
    echo json_encode(array('message'=>$message,'success'=>$success));

} 
 ?>

由ajax加载时，Bootstrap Toggle开关无法工作，并且可以调用事件2次

2 个答案: