Calling the inline JavaScript on a link using jQuery
<p>I am modifying an ancient table which has inline JavaScript in the form of <code>&lt;a href="javascript:&lt;lots of shit&gt;"&gt;</code>. The inline JavaScript works, but it would take months to rewrite it so that it fits my assignment, which is when an outer element is clicked the inline JavaScript should be executed.</p>

<p>I'm sorry if I'm not making any sense, but I have been as thoughtful as to provide a <a href="http://jsfiddle.net/s8cQb/" rel="nofollow">fiddle</a>. (The table aspect shouldn't matter.) TL;DR: when I click one of the colored <code>div</code>'s I would like its inner <code>alert()</code> to execute and how do I do that?</p>

<p><strong>Edit.</strong> Also, the link is actually hidden!</p>

<p><strong>Edit #2.</strong> And, as for now, none of the HTML should be tampered with. Only jQuery/JavaScript.</p>

<p><strong>Edit #3.</strong> I've updated the script to work with my table. The inner <code>&lt;span&gt;</code> is now not needed, I can select the <code>&lt;a&gt;</code> directly. Now I would just like to know if I'm using <code>stopPropagation()</code> correctly?</p>

<p>Code:</p>

<pre><code>$(function () {
    $('table.result-v2 tr.view').bind('click', function () {
        var $this = $(this),
            $next = $this.next();

        if ($next.attr('class') == 'detail') {
            var $buttons = $this.find('td.buttons'),
                $link = null;

            if ($next.css('display') == 'none') {
                $link = $buttons.find('a.show-link');
            } else {
                $link = $buttons.find('a.hide-link');
            }

            if ($link != null) {
                eval($link.attr('href')); // evaluate found link
                $link.bind('click', function (event) {
                    event.stopPropagation(); // is this needed when the link never can be clicked (it's hidden)?
                });
            }
        }
    });
});
</code></pre>
