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

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/