Question

我正在写一个大型网站，但我引用了一个小导航栏。我正在使用Twitter Bootstrap。

我确定我错过了一些新手。这是JsFiddle：http://jsfiddle.net/ugdh2jmL/2/。我将引用一系列动态加载的列表对象。我可以很容易地添加它们，但我有问题声明onclick事件;什么都没有，没有消息，什么也没有。

以下是摘录：

$('.list-group').on('click', '.list-group-item', function(e) {
  alert('success');
}):

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="col-sm-4">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="list-group">
          <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          </a>
          <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          </a>
          <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          </a>
        </div>
      </div>
      <!-- /.col-sm-4 -->
    </div>
  </div>
</div>
<!-- /.col-sm-4 -->

Answer 1

对于要触发的代码，您还需要包含jquery库。

我也更新了小提琴。

$(document).ready(function(){
$(document).on('click', '.list-group', function(e){
    alert('success');
});
});

http://jsfiddle.net/ugdh2jmL/3/

Answer 2

缺少jQuery，:应该是;

$('.list-group').on('click', '.list-group-item', function(e) {
  alert('success');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="col-sm-4">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="list-group">
          <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          </a>
          <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          </a>
          <a href="#" class="list-group-item">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
          </a>
        </div>
      </div>
      <!-- /.col-sm-4 -->
    </div>
  </div>
</div>
<!-- /.col-sm-4 -->

JQuery .on（'click'...问题引用list-group-items

2 个答案: