Question

Bootstrap轮播幻灯片在ajax成功通话中无效。 Ajax调用完成没有任何问题，但$("#myCarousel").carousel();无效＆amp;下一张幻灯片未显示。

<head>
....
<link rel="stylesheet" href="resources/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/bootstrap-theme.min.css">
<script src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>


<script type="text/javascript">


    $(document).ready(function() {

      $('#myId').click(function(event) {
        $.ajax({
            url: $("#myId").attr( "action"),
            type: 'GET',
            dataType: 'json',           
            contentType : 'application/json',
            success: function(data) {
                $("#myCarousel").carousel();
            }
        });
        event.preventDefault();
      });
    });   
  </script>



</head>
<body>
.....
<div class="container">

    <div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
        <div class="carousel-inner">
            <div class="active item">
            ...
                <button id="myId" action="${pageContext.request.contextPath}/create" type="submit" class="btn btn-primary">Login</button>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
            ....
            </div>
        </div>
    </div>
</div>


</body>
</html>

Answer 1

移至下一张幻灯片的正确语法是$('#myCarousel').carousel('next');

在ajax电话中的Bootstrap轮播问题

1 个答案: