Question

I am modifying an ancient table which has inline JavaScript in the form of <a href="javascript:<lots of shit>">. 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.

I’m sorry if I’m not making any sense, but I have been as thoughtful as to provide a fiddle. (The table aspect shouldn’t matter.) TL;DR: when I click one of the colored div‘s I would like its inner alert() to execute and how do I do that?

Edit. Also, the link is actually hidden!

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

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

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)?
                });
            }
        }
    });
});

Answer 1

Here is a quick hack that made your code work. And just to note that this is totally not how it should be done!

http://jsfiddle.net/2QaUX/1/

Instead of triggering a click, evaluate the inline script inside the href attribute:

Old:

$(function () {
    $('.foo').bind('click', function () {
        $(this).find('.bar').parent().trigger('click');
    });
});​

New:

$(function () {
    $('.foo').bind('click', function () {
        eval($(this).find('.bar').parent().attr('href'));
    });
    $('.bar').parent().bind('click', function (event) {
        event.stopPropagation(); 
    });
});​