JQuery .Click function unresponsive

New to using the click function. FIrst I incorporated it in a funct开发者_运维知识库ion triggered by an onClick event.

function clickroute(lati,long) {
      map.panTo(new google.maps.LatLng(lati, long));
      map.setZoom(14);
$('#outdirections a').click(function() {
          $('#outdirections a').removeClass('directionsselect');$(this).addClass('directionsselect');
      });
  }

Fully functional but the first time the function is triggered the click function does nothing. I tried then leaving it separated and just having this in the script.

$('#outdirections a').click(function() {
              $('#outdirections a').removeClass('directionsselect');$(this).addClass('directionsselect');
          });

But that does nothing. How do we trigger the click function correctly.

Any ideas?

Marvellous

The syntax you have is for binding, not triggering.

Handle your binding in document.ready:

$(document).ready(function() {
$('#outdirections a').click(function() {
      $('#outdirections a').removeClass('directionsselect');
      $(this).addClass('directionsselect');
      })
});

Then, any time an <a> within #outdirections is clicked, it'll remove/add the class.

Working demo on jsfiddle.

The event listener should be added after the load is completed:

in jQuery it's easiest to do like that:

$(function() {
  $('#outdirections a').click(function() {
              $('#outdirections a').removeClass('directionsselect');$(this).addClass('directionsselect');
          });
});

Where the $(function() { part is a short form for $(document).ready(function() {....

Try this

$("#outdirections a").live("click", function () {
              $('#outdirections a').removeClass('directionsselect');
      $(this).addClass('directionsselect');
      })

            });