使用jQuery在链接上调用内联JavaScript

Calling the inline JavaScript on a link using jQuery

本文关键字：JavaScript 调用 jQuery 链接 使用      更新时间：2023-09-26

我正在修改一个古老的表，该表具有<a href="javascript:<lots of shit>">形式的内联JavaScript。内联JavaScript是有效的，但需要几个月的时间来重写它，使其符合我的任务，即当单击外部元素时，应该执行内联JavaScript。

如果我说不通的话，我很抱歉，但我已经考虑周到了，提供了一把小提琴。（表方面应该无关紧要。）TL；DR：当我点击一个彩色的div时，我希望它的内部alert()执行，我该怎么做？

编辑此外，链接实际上是隐藏的！

编辑#2。而且，就目前而言，任何HTML都不应该被篡改。只有jQuery/JavaScript。

编辑#3。我已经更新了脚本以使用我的表。现在不需要内部的<span>，我可以直接选择<a>。现在我只想知道我是否正确使用stopPropagation()？

代码：

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

这里有一个快速破解，可以让您的代码正常工作请注意，这完全不是应该做的

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

与其触发点击，不如评估href属性中的内联脚本：

旧：

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

新增：

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

只需将js放在函数中

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

并在onclick上调用它，并将hrefjs替换为类似的void

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

你还必须注意传递的数据，我已经放置了参数ele，它将指向href，这样你就可以检索id或任何其他东西如果您想使用jQuery

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

这里有两个问题。一种是事件传播。当你点击div时，你会触发对链接的点击，这也是对div的点击。这会创建一个无限循环，它将迅速超过最大调用堆栈大小。为了解决这个问题，你需要做两件事：

  1. 只有当用户单击了div而不是其中的a时，才执行window.location.href分配
  2. 如果用户确实单击了a，请防止事件冒泡到div

第二个问题是链接上的"点击"事件不会执行存储在href属性中的javascript。您要做的是设置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();
});

这是的演示

--jsFiddle演示---

-注意-我强烈建议找到另一种方法来处理这种情况，但如果你不能更改现有的链接，这个选项是可行的

相关文章：