Question

I have a table that has a column that contains links. Each cell in the column contains two links:

• view
• play

When I click the ‘play’ link, I want to display an alert box. I has assigned all the play links the same class ‘play’

My script looks something like this:

$(document).ready(function(){
  $('a.play').click(function(){
      alert('I was clicked');
  });
});

I know the script above wont work, because there is more that one element that matches the expression. However I have tried just about everything, including using $(this) to try to get to the clicked element – still it doesn’t work. What do I have to do to get the a.play links to pop an alert when clicked?

BTW, if I type $(‘a.play’) in the FF console, the elements are correctly selected so I know my selectors are correct.

[Edit]

Corrected typo in above snippet. From the comments I have got so far, it seems the code above should work. Here is some further detail then. I tried to keep things simple so as to prevent people getting distracted with possible red herrings, but it seems further information is required – as it is possible that there may be a clash between some of the plugins I am using on the page (even though there are no reported errors/warnings).

So here goes:

I am using the DataTables plugin to create a sortable, paged table. In one of the columns of the table, the cells contain the ‘View’ and ‘Play’ links. When the ‘Play’ link is selected, I want to display a modal form, which I can use to gather information from the user. I am using the jQuery UI plugin, and am using almost verbatim copy of the code here, (just to test the concept).

So, what I am trying to do is this:

1. Click on the link: $(‘a.play’) selects the elements correctly
2. Display a modal form when any one of the ‘play’ links is selected

Answer 1

You’re missing the closing ) after document.

   // ----v-------------------was missing
$(document).ready(function(){
  $('a.play').click(function( event ){
      event.preventDefault(); // <---------you may want this to stop the link
      alert('I was clicked'); //                            from being followed
      return false; // <---------or this if you want to prevent bubbling as well
  });
});

Example: http://jsfiddle.net/Cz44v/