0

我正在修改一个具有内联 JavaScript 的古老表格，其形式为<a href="javascript:<lots of shit>">. 内联 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)?
                });
            }
        }
    });
});
4

3 回答 3

2

这是使您的代码正常工作的快速技巧。只是要注意，这完全不是应该这样做的！

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(); 
    });
});​
于 2012-08-29T13:24:09.437 回答
1

只需将那个js放在一个函数中

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

并在 onclick 上调用它并用 void 替换 href js

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

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

$('#idofAtag').click(function(){//<lots of shit>});
于 2012-08-29T13:23:45.817 回答
1

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

  1. window.location.href仅当用户单击其中div而不是其中时才执行分配a。
  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 演示 ---

- 注意 - 我强烈建议寻找另一种方法来处理这种情况，但如果您无法更改现有链接，则此选项是可行的。

于 2012-08-29T13:34:23.113 回答