Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is a possible solution. How the script works is explained in the comments.</p> <h3>DEMO</h3> <p><a href="http://jsfiddle.net/insertusernamehere/hp45v/" rel="nofollow">http://jsfiddle.net/insertusernamehere/hp45v/</a></p> <h3>JavaScript</h3> <pre><code>$(document).ready(function () { // add a handler for the click event to the specific element $('#action_link').click( function(event) { // write that message $('#action_message').text('The link is disabled.'); // do/call your action here (like ajax or some DOM stuff) $('#action_response').text('Something happened here'); // release the event handler that it won't fire again $(this).unbind('click'); // prevent default action of the link - this is not really necessary as the link has no "href"-attribute event.preventDefault(); }); }); </code></pre> <h3>HTML</h3> <pre><code>&lt;a id="action_link"&gt;Action link&lt;/a&gt; &lt;div id="action_message"&gt;&lt;/div&gt; &lt;div id="action_response"&gt;&lt;/div&gt; </code></pre> <h3>Extension</h3> <p>If you have multiple of those links with different actions you could use a class for all links like:</p> <pre><code>&lt;a class="action" data-action="load"&gt;Action 1&lt;/a&gt; &lt;a class="action" data-action="view"&gt;Action 2&lt;/a&gt; </code></pre> <p>and rewrite the JavaScript function to:</p> <pre><code>// add a handler for the click event to all elements with the class 'action' $('.action').click( function(event) { if ('load' == $(this).attr('data-action')) { // your action here (like ajax or some DOM stuff) $('#action_response').text('The action was: load'); } if ('view' == $(this).attr('data-action')) { // your action here (like ajax or some DOM stuff) $('#action_response').text('The action was: view'); } // release the event handler that it won't fire again $(this).unbind('click'); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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