Twitter Bootstrap Question posted in

Twitter bootstrap – JQuery .on('click'… issue referencing list-group-items

I am writing a large website and I got stuck referencing a small navigation bar. I am using Twitter Bootstrap.

I’m sure I’m missing something novice. This is the JsFiddle: http://jsfiddle.net/ugdh2jmL/2/. I’m going to be referencing a series of dynamically loaded list objects. I can add them easily but I’m having issues declaring an onclick event; nothing happens, no message, nothing.

Here are the snippets:

$('.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 -->
Tags:

2

Answers


  1. 0

    For code to trigger you need to include jquery library as well.

    I have also updated fiddle.

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

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

    Login or Signup to reply.
  2. 0

    Missing jQuery and : should be ;

    $('.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 -->
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search