Databases
StackOverflow2013
Postsdbo
POjQuery: how to respond to the click event of an anchor tag of a specific class?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: how to respond to the click event of an anchor tag of a specific class?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload