Jquery 引导切换开关在ajax加载时不工作，并调用事件2次_Jquery_Ajax

Jquery 引导切换开关在ajax加载时不工作，并调用事件2次

jquery ajax

Jquery 引导切换开关在ajax加载时不工作，并调用事件2次,jquery,ajax,Jquery,Ajax,我正在通过ajax加载这个切换html，并在页面中加载这个开关，并尝试使产品处于启用/禁用状态。但是，当我通过ajax调用它时，它不起作用。您必须在成功响应ajax后初始化开关代码所有与该开关的事件绑定都必须在ajax响应后完成，因为您正在动态添加内容，因此您需要重新初始化该开关的所有内容。大约一周前，我遇到了相同的问题。我解决了以下问题。希望以下代码对您有很大帮助 Test.php <html> <head> <link rel="styleshee

我正在通过ajax加载这个切换html，并在页面中加载这个开关，并尝试使产品处于启用/禁用状态。但是，当我通过ajax调用它时，它不起作用。

您必须在成功响应ajax后初始化开关代码

所有与该开关的事件绑定都必须在ajax响应后完成，因为您正在动态添加内容，因此您需要重新初始化该开关的所有内容。大约一周前，我遇到了相同的问题。我解决了以下问题。希望以下代码对您有很大帮助

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>


window.jQuery | | document.write（“”）



$（'#toggle'）。更改（函数（）{
var mode=$（this.prop（'checked'）；
////提交表格
//$（#myForm）.ajaxSubmit（）；
////返回false以防止正常的浏览器提交和页面导航
//返回false；
$.ajax({
类型：'POST'，
数据类型：'JSON'，
url:'audio_alarm.php'，
数据：{mode:mode}，
成功：功能（数据）
{
var数据=评估（数据）；
message=data.message；
success=data.success；
$（“#标题”）.html（成功）；
$（“#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));

} 
 ?>

请检查以下内容。我遇到了相同的问题，但我解决了以下问题。