Question

我有一个简单的标签和一个按钮来激活其中一个标签以绕过药片。

   <ul class="nav nav-tabs hide" role="tablist" id="myTab">
        <li role="presentation" ><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation" id="aaa"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="home">1</div>
        <div role="tabpanel" class="tab-pane" id="profile">2</div>
        <div role="tabpanel" class="tab-pane" id="messages">3</div>
        <div role="tabpanel" class="tab-pane" id="settings">4</div>
    </div>

和一些javascript

$('#myTab a').click(function (e) {
e.preventDefault()
 $(this).tab('show')
 })
  $(document).ready(function(){
            $('#btnn').click( function() {
                   $('#myTab a[href="#messages"]').tab('show');
            });
        });

然而，当我在我的真实页面中使用此代码时，该按钮不再起作用，因为我有一个滑块可立即执行ajax调用。如果我删除第一个AJAX调用它可以工作。但正如你想象的那样，我实际上需要ajax调用：）

$(function() {
    $( "#slider" ).slider({
  value:10,
  min: 0,
  max: 12,
  step: 1,
  range: "min",
  slide: function( event, ui ) {
    $( "#amount" ).val( ui.value + " mois");
  },
  change: function(event, ui) {
        // when the user change the slider
    },
  create : function(event, ui) {
      var request = $.ajax({
        url: "Ajax_livret.php",
        type: "POST",
        data : 'duree=' + 10,           
        dataType: "html"
    });

    request.done(function(msg) {
        $("#result").html(msg);         
    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });            

  },
  stop: function(event, ui) {
        var request = $.ajax({
        url: "Ajax_livret.php",
        type: "POST",
        data : 'duree=' + ui.value,         
        dataType: "html"
    });

    request.done(function(msg) {
        $("#result").html(msg);         
    });

    request.fail(function(jqXHR, textStatus) {
        alert( "Request failed: " + textStatus );
    });            
   },

});
$( "#amount" ).val( $( "#slider" ).slider('value') + " mois");

  });



   </script>

任何人都知道为什么会发生这种情况以及如何解决这个问题？

欢呼声

Answer 1

我终于找到了问题！

我在我的ajax文件中再次加载Jquery因此导致了问题。我希望我的回答能帮助别人！

Bootstrap Tab和AJAX功能故障

1 个答案: