CODEWITHSUNDEEP
javascriptjquery
Viktor
Viktor

Reputation: 507

Calling the inline JavaScript on a link using jQuery

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

Upvotes: 0

Views: 1726

Answers (3)

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

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(); 
    });
});​

Upvotes: 2

jackwanders
jackwanders

Reputation: 16040

There are two issues here. One is event propagation. When you click the div, you trigger a click on the link, which is also a click on the div. This creates an infinite loop which will quickly exceed the maximum call stack size. To get around this, you need to do two things:

  1. Only execute the window.location.href assignment if the user clicked on the div and not the a within it.
  2. If the user DOES click on the a, prevent the event from bubbling up to the div

The second issue is that the 'click' event on a link won't execute javascript stored in an href attribute. what you want to do is set window.location.href.

$('.foo').on('click', function (e) {
    var link =  $(this).find('.bar').parent('a');
    if(e.target != link.get(0)) {
        window.location.href = link.attr('href');
    }
});
$('.foo').on('click', 'a', function(e) {
    e.stopPropagation();
});

Here's a demo

--- jsFiddle DEMO ---

- NOTE - I would strongly recommend finding another way to handle this situation, but if you cannot alter the existing links, this option is viable.

Upvotes: 1

Rupesh Patel
Rupesh Patel

Reputation: 3065

just place that js whithin a function 

function clikEvent(ele)
{
 //<lots of shit>
}

and call it on onclick and replace href js with void like 

<a  href="javascript:void(0)" onClick='clikEvent(this)'>

you have to also tack care of the data passed I have placed parameter ele wich will point the href so you can retrive id of or any other thing if you want to use jQuery

$('#idofAtag').click(function(){//<lots of shit>});

Upvotes: 1

Related Questions