jQuery: how to respond to the click event of an anchor tag of a specific class?
<p>I have a table that has a column that contains links. Each cell in the column contains two links:</p>

<ul>
<li>view</li>
<li>play</li>
</ul>

<p>When I click the 'play' link, I want to display an alert box. I has assigned all the play links the same class 'play'</p>

<p>My script looks something like this:</p>

<pre><code>$(document).ready(function(){
  $('a.play').click(function(){
      alert('I was clicked');
  });
});
</code></pre>

<p>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?</p>

<p>BTW, if I type $('a.play') in the FF console, the elements are correctly selected so I know my selectors are correct.</p>

<p><strong>[Edit]</strong></p>

<p>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).</p>

<p>So here goes:</p>

<p>I am using the <a href="http://www.datatables.net/" rel="nofollow">DataTables plugin</a> 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 <a href="http://jqueryui.com/demos/dialog/#modal-form" rel="nofollow">here</a>, (just to test the concept).</p>

<p>So, what I am trying to do is this:</p>

<ol>
<li>Click on the link:  $('a.play') selects the elements correctly</li>
<li>Display a modal form when any one of the 'play' links is selected</li>
</ol>
