无法专注于Bootstrap Carousel中的输入字段

Question

我无法专注于bootstrap轮播中的任何input字段.

无论你多少次点击它,该input领域都没有集中注意力.

我甚至尝试过z-index这个input领域,但它仍然没有集中精力.

您可以通过运行下面的代码段来检查错误.

$(document).ready(function(){

$(".carousel").swipe({

  swipe: function(event, direction, distance, duration, fingerCount, fingerData) {

    if (direction == 'left') $(this).carousel('next');
    if (direction == 'right') $(this).carousel('prev');

  },
  allowPageScroll:"vertical"

});

});

.carousel-indicators {
  position: absolute !important;
  bottom: -100px !important;
}

.carousel-indicators li {
  background-color: green;
  border: 1px solid green !important;
}

.carousel-inner>.item>div {
  padding: 30px;
}

.carousel-inner>.item>div>div {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
<div class="container" id="skill-builder">

    <div class="row">

      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
    
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <div>
              <p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
              <div>
                <img src="./assets/questions/1-question.jpg" alt="">
              </div>
              <div>
                <input type="text" placeholder="Enter Answer" name="answer">
              </div>
              <div>
                <button>Confirm</button>
              </div>
            </div>
          </div>
          <div class="item">
            <div>
              <p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
              <div><img src="./assets/questions/2-question.png" alt=""></div>
              <div>
                <input type="text" placeholder="Enter Answer" name="answer2">
              </div>
              <div>
                <button>Confirm</button>
              </div>
            </div>
          </div>
          <div class="item">
            <div>
              <p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
              <div><img src="./assets/questions/1-question.jpg" alt=""></div>
            </div>
          </div>
        </div>
    
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    
    </div>

  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

将touchSwipe版本从 1.6.18更改为 1.6.4